Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/examples/SampleVideo[[:space:]]1280x720.mp4 filter=lfs diff=lfs merge=lfs -text
+src/examples/Samplevideo[[:space:]]720x480.mp4 filter=lfs diff=lfs merge=lfs -text

.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,419 @@
----
-title: Gradio Videoslider
-emoji: 👀
-colorFrom: red
-colorTo: pink
-sdk: gradio
-sdk_version: 5.38.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+tags: [gradio-custom-component, ImageSlider]
+title: gradio_videoslider
+short_description: VideoSlider Component for Gradio
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_videoslider`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+VideoSlider Component for Gradio
+
+## Installation
+
+```bash
+pip install gradio_videoslider
+```
+
+## Usage
+
+```python
+# In demo/app.py
+import gradio as gr
+from gradio_videoslider import VideoSlider
+import os
+
+# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
+#
+# IMPORTANT: Replace the values below with the paths to YOUR video files.
+#
+# Option A: Relative Path (if the video is in the same folder as this app.py)
+# video_path_1 = "video_antes.mp4"
+# video_path_2 = "video_depois.mp4"
+#
+# Option B: Absolute Path (the full path to the file on your computer)
+# Example for Windows:
+# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
+#
+# Example for Linux/macOS:
+# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
+
+# Set your file paths here:
+video_path_1 = "examples/SampleVideo 720x480.mp4"
+video_path_2 = "examples/SampleVideo 1280x720.mp4"
+
+
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+def process_uploaded_videos(video_inputs):
+    """This function handles the uploaded videos."""
+    print("Received videos from upload:", video_inputs)
+    return video_inputs
+
+
+# --- 3. GRADIO INTERFACE ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Slider Component Usage Examples")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
+
+    with gr.Tabs():
+        # --- TAB 1: UPLOAD EXAMPLE ---
+        with gr.TabItem("1. Compare via Upload"):
+            gr.Markdown("## Upload two videos to compare them side-by-side.")
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_output = VideoSlider(
+                label="Video comparision",
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+            submit_btn = gr.Button("Submit")
+            submit_btn.click(
+                fn=process_uploaded_videos,
+                inputs=[video_slider_input],
+                outputs=[video_slider_output]
+            )
+
+        # --- TAB 2: LOCAL FILE EXAMPLE ---
+        with gr.TabItem("2. Compare Local Files"):
+            gr.Markdown("## Example with videos pre-loaded from your local disk.")
+            
+            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
+            VideoSlider(
+                label="Video comparision",
+                value=(video_path_1, video_path_2),
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+
+# Optional: A check to give a helpful error message if files are not found.
+if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
+    print("---")
+    print(f"WARNING: Could not find one or both video files.")
+    print(f"Please make sure these paths are correct in your app.py file:")
+    print(f"  - '{os.path.abspath(video_path_1)}'")
+    print(f"  - '{os.path.abspath(video_path_2)}'")
+    print("---")
+
+if __name__ == '__main__':
+    demo.launch()
+
+```
+
+## `VideoSlider`
+
+### 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
+typing.Union[
+    typing.Tuple[str | pathlib.Path, str | pathlib.Path],
+    typing.Callable,
+    NoneType,
+][
+    typing.Tuple[str | pathlib.Path, str | pathlib.Path][
+        str | pathlib.Path, str | pathlib.Path
+    ],
+    Callable,
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A tuple of two video file paths or URLs to display initially.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The height of the component in pixels.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The width of the component in pixels.</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.</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">None</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">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</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">None</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">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If False, the component will be in display-only mode.</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">None</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
+typing.Union[typing.List[str], str, NoneType][
+    typing.List[str][str], str, None
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>position</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>50</code></td>
+<td align="left">The initial position of the slider, from 0 to 100.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_fullscreen_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>autoplay</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, the videos will start playing automatically.</td>
+</tr>
+
+<tr>
+<td align="left"><code>loop</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, the videos will loop when they finish.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the VideoSlider 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. |
+| `upload` | This listener is triggered when the user uploads a file into the VideoSlider. |
+| `clear` | This listener is triggered when the user clears the VideoSlider using the clear button for the component. |
+
+
+
+### 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.
+
+
+
+ ```python
+ def predict(
+     value: typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]
+ ) -> typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,83 @@
+# In demo/app.py
+import gradio as gr
+from gradio_videoslider import VideoSlider
+import os
+
+# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
+#
+# IMPORTANT: Replace the values below with the paths to YOUR video files.
+#
+# Option A: Relative Path (if the video is in the same folder as this app.py)
+# video_path_1 = "video_antes.mp4"
+# video_path_2 = "video_depois.mp4"
+#
+# Option B: Absolute Path (the full path to the file on your computer)
+# Example for Windows:
+# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
+#
+# Example for Linux/macOS:
+# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
+
+# Set your file paths here:
+video_path_1 = "examples/SampleVideo 720x480.mp4"
+video_path_2 = "examples/SampleVideo 1280x720.mp4"
+
+
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+def process_uploaded_videos(video_inputs):
+    """This function handles the uploaded videos."""
+    print("Received videos from upload:", video_inputs)
+    return video_inputs
+
+
+# --- 3. GRADIO INTERFACE ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Slider Component Usage Examples")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
+
+    with gr.Tabs():
+        # --- TAB 1: UPLOAD EXAMPLE ---
+        with gr.TabItem("1. Compare via Upload"):
+            gr.Markdown("## Upload two videos to compare them side-by-side.")
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_output = VideoSlider(
+                label="Video comparision",
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+            submit_btn = gr.Button("Submit")
+            submit_btn.click(
+                fn=process_uploaded_videos,
+                inputs=[video_slider_input],
+                outputs=[video_slider_output]
+            )
+
+        # --- TAB 2: LOCAL FILE EXAMPLE ---
+        with gr.TabItem("2. Compare Local Files"):
+            gr.Markdown("## Example with videos pre-loaded from your local disk.")
+            
+            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
+            VideoSlider(
+                label="Video comparision",
+                value=(video_path_1, video_path_2),
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+
+# Optional: A check to give a helpful error message if files are not found.
+if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
+    print("---")
+    print(f"WARNING: Could not find one or both video files.")
+    print(f"Please make sure these paths are correct in your app.py file:")
+    print(f"  - '{os.path.abspath(video_path_1)}'")
+    print(f"  - '{os.path.abspath(video_path_2)}'")
+    print("---")
+
+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_videoslider

space.py

@@ -0,0 +1,222 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'VideoSlider': {'description': 'A custom Gradio component to display a side-by-side video comparison with a slider.\nIt can be used as both an input (uploading two videos) and an output (displaying two videos).', 'members': {'__init__': {'value': {'type': 'typing.Union[\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path],\n    typing.Callable,\n    NoneType,\n][\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path][\n        str | pathlib.Path, str | pathlib.Path\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': 'A tuple of two video file paths or URLs to display initially.'}, 'height': {'type': 'int | None', 'default': 'None', 'description': 'The height of the component in pixels.'}, 'width': {'type': 'int | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If False, the component will be in display-only mode.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'typing.Union[typing.List[str], str, NoneType][\n    typing.List[str][str], str, None\n]', 'default': 'None', 'description': None}, 'position': {'type': 'int', 'default': '50', 'description': 'The initial position of the slider, from 0 to 100.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': None}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': None}, 'autoplay': {'type': 'bool', 'default': 'False', 'description': 'If True, the videos will start playing automatically.'}, 'loop': {'type': 'bool', 'default': 'False', 'description': 'If True, the videos will loop when they finish.'}}, 'postprocess': {'value': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the VideoSlider 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.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the VideoSlider.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the VideoSlider using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'VideoSlider': []}}}
+
+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_videoslider`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+VideoSlider Component for Gradio
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_videoslider
+```
+
+## Usage
+
+```python
+# In demo/app.py
+import gradio as gr
+from gradio_videoslider import VideoSlider
+import os
+
+# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
+#
+# IMPORTANT: Replace the values below with the paths to YOUR video files.
+#
+# Option A: Relative Path (if the video is in the same folder as this app.py)
+# video_path_1 = "video_antes.mp4"
+# video_path_2 = "video_depois.mp4"
+#
+# Option B: Absolute Path (the full path to the file on your computer)
+# Example for Windows:
+# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
+#
+# Example for Linux/macOS:
+# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
+
+# Set your file paths here:
+video_path_1 = "examples/SampleVideo 720x480.mp4"
+video_path_2 = "examples/SampleVideo 1280x720.mp4"
+
+
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+def process_uploaded_videos(video_inputs):
+    \"\"\"This function handles the uploaded videos.\"\"\"
+    print("Received videos from upload:", video_inputs)
+    return video_inputs
+
+
+# --- 3. GRADIO INTERFACE ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Slider Component Usage Examples")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
+
+    with gr.Tabs():
+        # --- TAB 1: UPLOAD EXAMPLE ---
+        with gr.TabItem("1. Compare via Upload"):
+            gr.Markdown("## Upload two videos to compare them side-by-side.")
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_output = VideoSlider(
+                label="Video comparision",
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+            submit_btn = gr.Button("Submit")
+            submit_btn.click(
+                fn=process_uploaded_videos,
+                inputs=[video_slider_input],
+                outputs=[video_slider_output]
+            )
+
+        # --- TAB 2: LOCAL FILE EXAMPLE ---
+        with gr.TabItem("2. Compare Local Files"):
+            gr.Markdown("## Example with videos pre-loaded from your local disk.")
+            
+            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
+            VideoSlider(
+                label="Video comparision",
+                value=(video_path_1, video_path_2),
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+
+# Optional: A check to give a helpful error message if files are not found.
+if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
+    print("---")
+    print(f"WARNING: Could not find one or both video files.")
+    print(f"Please make sure these paths are correct in your app.py file:")
+    print(f"  - '{os.path.abspath(video_path_1)}'")
+    print(f"  - '{os.path.abspath(video_path_2)}'")
+    print("---")
+
+if __name__ == '__main__':
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `VideoSlider`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["VideoSlider"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["VideoSlider"]["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.
+
+
+
+ ```python
+def predict(
+    value: typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]
+) -> typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]:
+    return value
+```
+""", elem_classes=["md-custom", "VideoSlider-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          VideoSlider: [], };
+    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,419 @@
+---
+tags: [gradio-custom-component, ImageSlider]
+title: gradio_videoslider
+short_description: VideoSlider Component for Gradio
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_videoslider`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+VideoSlider Component for Gradio
+
+## Installation
+
+```bash
+pip install gradio_videoslider
+```
+
+## Usage
+
+```python
+# In demo/app.py
+import gradio as gr
+from gradio_videoslider import VideoSlider
+import os
+
+# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
+#
+# IMPORTANT: Replace the values below with the paths to YOUR video files.
+#
+# Option A: Relative Path (if the video is in the same folder as this app.py)
+# video_path_1 = "video_antes.mp4"
+# video_path_2 = "video_depois.mp4"
+#
+# Option B: Absolute Path (the full path to the file on your computer)
+# Example for Windows:
+# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
+#
+# Example for Linux/macOS:
+# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
+
+# Set your file paths here:
+video_path_1 = "examples/SampleVideo 720x480.mp4"
+video_path_2 = "examples/SampleVideo 1280x720.mp4"
+
+
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+def process_uploaded_videos(video_inputs):
+    """This function handles the uploaded videos."""
+    print("Received videos from upload:", video_inputs)
+    return video_inputs
+
+
+# --- 3. GRADIO INTERFACE ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Slider Component Usage Examples")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
+
+    with gr.Tabs():
+        # --- TAB 1: UPLOAD EXAMPLE ---
+        with gr.TabItem("1. Compare via Upload"):
+            gr.Markdown("## Upload two videos to compare them side-by-side.")
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_output = VideoSlider(
+                label="Video comparision",
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+            submit_btn = gr.Button("Submit")
+            submit_btn.click(
+                fn=process_uploaded_videos,
+                inputs=[video_slider_input],
+                outputs=[video_slider_output]
+            )
+
+        # --- TAB 2: LOCAL FILE EXAMPLE ---
+        with gr.TabItem("2. Compare Local Files"):
+            gr.Markdown("## Example with videos pre-loaded from your local disk.")
+            
+            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
+            VideoSlider(
+                label="Video comparision",
+                value=(video_path_1, video_path_2),
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+
+# Optional: A check to give a helpful error message if files are not found.
+if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
+    print("---")
+    print(f"WARNING: Could not find one or both video files.")
+    print(f"Please make sure these paths are correct in your app.py file:")
+    print(f"  - '{os.path.abspath(video_path_1)}'")
+    print(f"  - '{os.path.abspath(video_path_2)}'")
+    print("---")
+
+if __name__ == '__main__':
+    demo.launch()
+
+```
+
+## `VideoSlider`
+
+### 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
+typing.Union[
+    typing.Tuple[str | pathlib.Path, str | pathlib.Path],
+    typing.Callable,
+    NoneType,
+][
+    typing.Tuple[str | pathlib.Path, str | pathlib.Path][
+        str | pathlib.Path, str | pathlib.Path
+    ],
+    Callable,
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A tuple of two video file paths or URLs to display initially.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The height of the component in pixels.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The width of the component in pixels.</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.</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">None</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">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</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">None</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">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If False, the component will be in display-only mode.</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">None</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
+typing.Union[typing.List[str], str, NoneType][
+    typing.List[str][str], str, None
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>position</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>50</code></td>
+<td align="left">The initial position of the slider, from 0 to 100.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_fullscreen_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>autoplay</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, the videos will start playing automatically.</td>
+</tr>
+
+<tr>
+<td align="left"><code>loop</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, the videos will loop when they finish.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the VideoSlider 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. |
+| `upload` | This listener is triggered when the user uploads a file into the VideoSlider. |
+| `clear` | This listener is triggered when the user clears the VideoSlider using the clear button for the component. |
+
+
+
+### 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.
+
+
+
+ ```python
+ def predict(
+     value: typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]
+ ) -> typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]:
+     return value
+ ```
+ 

src/backend/gradio_videoslider/__init__.py

@@ -0,0 +1,4 @@
+
+from .videoslider import VideoSlider
+
+__all__ = ['VideoSlider']

src/backend/gradio_videoslider/templates/component/assets/worker-BAOIWoxA.js

@@ -0,0 +1 @@
+(function(){"use strict";const i="https://unpkg.com/@ffmpeg/[email protected]/dist/umd/ffmpeg-core.js";var E;(function(t){t.LOAD="LOAD",t.EXEC="EXEC",t.FFPROBE="FFPROBE",t.WRITE_FILE="WRITE_FILE",t.READ_FILE="READ_FILE",t.DELETE_FILE="DELETE_FILE",t.RENAME="RENAME",t.CREATE_DIR="CREATE_DIR",t.LIST_DIR="LIST_DIR",t.DELETE_DIR="DELETE_DIR",t.ERROR="ERROR",t.DOWNLOAD="DOWNLOAD",t.PROGRESS="PROGRESS",t.LOG="LOG",t.MOUNT="MOUNT",t.UNMOUNT="UNMOUNT"})(E||(E={}));const f=new Error("unknown message type"),a=new Error("ffmpeg is not loaded, call `await ffmpeg.load()` first"),u=new Error("failed to import ffmpeg-core.js");let r;const O=async({coreURL:t,wasmURL:n,workerURL:e})=>{const o=!r;try{t||(t=i),importScripts(t)}catch{if((!t||t===i)&&(t=i.replace("/umd/","/esm/")),self.createFFmpegCore=(await import(t)).default,!self.createFFmpegCore)throw u}const s=t,c=n||t.replace(/.js$/g,".wasm"),p=e||t.replace(/.js$/g,".worker.js");return r=await self.createFFmpegCore({mainScriptUrlOrBlob:`${s}#${btoa(JSON.stringify({wasmURL:c,workerURL:p}))}`}),r.setLogger(R=>self.postMessage({type:E.LOG,data:R})),r.setProgress(R=>self.postMessage({type:E.PROGRESS,data:R})),o},m=({args:t,timeout:n=-1})=>{r.setTimeout(n),r.exec(...t);const e=r.ret;return r.reset(),e},l=({args:t,timeout:n=-1})=>{r.setTimeout(n),r.ffprobe(...t);const e=r.ret;return r.reset(),e},D=({path:t,data:n})=>(r.FS.writeFile(t,n),!0),S=({path:t,encoding:n})=>r.FS.readFile(t,{encoding:n}),I=({path:t})=>(r.FS.unlink(t),!0),L=({oldPath:t,newPath:n})=>(r.FS.rename(t,n),!0),N=({path:t})=>(r.FS.mkdir(t),!0),A=({path:t})=>{const n=r.FS.readdir(t),e=[];for(const o of n){const s=r.FS.stat(`${t}/${o}`),c=r.FS.isDir(s.mode);e.push({name:o,isDir:c})}return e},k=({path:t})=>(r.FS.rmdir(t),!0),w=({fsType:t,options:n,mountPoint:e})=>{const o=t,s=r.FS.filesystems[o];return s?(r.FS.mount(s,n,e),!0):!1},b=({mountPoint:t})=>(r.FS.unmount(t),!0);self.onmessage=async({data:{id:t,type:n,data:e}})=>{const o=[];let s;try{if(n!==E.LOAD&&!r)throw a;switch(n){case E.LOAD:s=await O(e);break;case E.EXEC:s=m(e);break;case E.FFPROBE:s=l(e);break;case E.WRITE_FILE:s=D(e);break;case E.READ_FILE:s=S(e);break;case E.DELETE_FILE:s=I(e);break;case E.RENAME:s=L(e);break;case E.CREATE_DIR:s=N(e);break;case E.LIST_DIR:s=A(e);break;case E.DELETE_DIR:s=k(e);break;case E.MOUNT:s=w(e);break;case E.UNMOUNT:s=b(e);break;default:throw f}}catch(c){self.postMessage({id:t,type:E.ERROR,data:c.toString()});return}s instanceof Uint8Array&&o.push(s.buffer),self.postMessage({id:t,type:n,data:s},o)}})();

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

@@ -0,0 +1 @@
+.block.svelte-239wnu{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.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{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)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{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(--block-label-border-color);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-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{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-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{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}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{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);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{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)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-1pgj5gs{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-700);background:var (--color-grey-50)}.dark .toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-1pgj5gs{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-title.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-title.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-title.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-title.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-close.svelte-1pgj5gs{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-close.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-close.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-close.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-close.success.svelte-1pgj5gs{color:var(--color-green-500)}.toast-text.svelte-1pgj5gs{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-text.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-text.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-text.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-text.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-details.svelte-1pgj5gs{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1pgj5gs{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-icon.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-icon.success.svelte-1pgj5gs{color:var(--color-green-500)}@keyframes svelte-1pgj5gs-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1pgj5gs{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1pgj5gs-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1pgj5gs{background:var(--color-red-700)}.dark .timer.error.svelte-1pgj5gs{background:var(--color-red-500)}.timer.warning.svelte-1pgj5gs{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1pgj5gs{background:var(--color-yellow-500)}.timer.info.svelte-1pgj5gs{background:var(--color-grey-700)}.dark .timer.info.svelte-1pgj5gs{background:var(--color-grey-500)}.timer.success.svelte-1pgj5gs{background:var(--color-green-700)}.dark .timer.success.svelte-1pgj5gs{background:var(--color-green-500)}.hidden.svelte-1pgj5gs{display:none}.toast-text.svelte-1pgj5gs a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.wrap.svelte-12ucyq4.svelte-12ucyq4{position:relative;width:100%;height:100%;z-index:var(--layer-1);overflow:hidden}.icon-wrap.svelte-12ucyq4.svelte-12ucyq4{display:block;position:absolute;top:50%;transform:translate(-20.5px,-50%);left:10px;width:40px;transition:.2s;color:var(--body-text-color);height:30px;border-radius:5px;background-color:var(--color-accent);display:flex;align-items:center;justify-content:center;z-index:var(--layer-3);box-shadow:0 0 5px 2px #0000004d;font-size:12px}.icon.left.svelte-12ucyq4.svelte-12ucyq4{transform:rotate(135deg);text-shadow:-1px -1px 1px rgba(0,0,0,.1)}.icon.right.svelte-12ucyq4.svelte-12ucyq4{transform:rotate(-45deg);text-shadow:-1px -1px 1px rgba(0,0,0,.1)}.icon.center.svelte-12ucyq4.svelte-12ucyq4{display:block;width:1px;height:100%;background-color:var(--color);opacity:.1}.icon-wrap.active.svelte-12ucyq4.svelte-12ucyq4,.icon-wrap.disabled.svelte-12ucyq4.svelte-12ucyq4{opacity:0}.outer.svelte-12ucyq4.svelte-12ucyq4{width:20px;height:100%;position:absolute;cursor:grab;top:0;left:-10px;pointer-events:auto;z-index:var(--layer-2)}.grab.svelte-12ucyq4.svelte-12ucyq4{cursor:grabbing}.inner.svelte-12ucyq4.svelte-12ucyq4{width:1px;height:100%;background:var(--color);position:absolute;left:calc((100% - 2px)/2)}.disabled.svelte-12ucyq4.svelte-12ucyq4{cursor:auto}.disabled.svelte-12ucyq4 .inner.svelte-12ucyq4{box-shadow:none}.content.svelte-12ucyq4.svelte-12ucyq4{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}.overlay.svelte-1pwzuub{position:absolute;background-color:#0006;width:100%;height:100%}.hidden.svelte-1pwzuub{display:none}.load-wrap.svelte-1pwzuub{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-1pwzuub{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-1pwzuub-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-1pwzuub-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.load-wrap.svelte-kn3uji{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-kn3uji{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-kn3uji-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-kn3uji-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.container.svelte-kn3uji{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg)}#timeline.svelte-kn3uji{display:flex;height:var(--size-10);flex:1;position:relative}img.svelte-kn3uji{flex:1 1 auto;min-width:0;object-fit:cover;height:var(--size-12);border:1px solid var(--block-border-color);-webkit-user-select:none;user-select:none;z-index:1}.handle.svelte-kn3uji{width:3px;background-color:var(--color-accent);cursor:ew-resize;height:var(--size-12);z-index:3;position:absolute}.opaque-layer.svelte-kn3uji{background-color:#e6672840;border:1px solid var(--color-accent);height:var(--size-12);position:absolute;z-index:2}.wrap.svelte-cr2edf.svelte-cr2edf{overflow-y:auto;transition:opacity .5s ease-in-out;background:var(--block-background-fill);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--size-40);width:var(--size-full)}.wrap.svelte-cr2edf.svelte-cr2edf:after{content:"";position:absolute;top:0;left:0;width:var(--upload-progress-width);height:100%;transition:all .5s ease-in-out;z-index:1}.uploading.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-lg);font-family:var(--font);z-index:2}.file-name.svelte-cr2edf.svelte-cr2edf{margin:var(--spacing-md);font-size:var(--text-lg);color:var(--body-text-color-subdued)}.file.svelte-cr2edf.svelte-cr2edf{font-size:var(--text-md);z-index:2;display:flex;align-items:center}.file.svelte-cr2edf progress.svelte-cr2edf{display:inline;height:var(--size-1);width:100%;transition:all .5s ease-in-out;color:var(--color-accent);border:none}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-value{background-color:var(--color-accent);border-radius:20px}.file.svelte-cr2edf progress[value].svelte-cr2edf::-webkit-progress-bar{background-color:var(--border-color-accent);border-radius:20px}.progress-bar.svelte-cr2edf.svelte-cr2edf{width:14px;height:14px;border-radius:50%;background:radial-gradient(closest-side,var(--block-background-fill) 64%,transparent 53% 100%),conic-gradient(var(--color-accent) var(--upload-progress-width),var(--border-color-accent) 0);transition:all .5s ease-in-out}button.svelte-1o7nwih{cursor:pointer;width:var(--size-full)}.center.svelte-1o7nwih{display:flex;justify-content:center}.flex.svelte-1o7nwih{display:flex;flex-direction:column;justify-content:center;align-items:center}.hidden.svelte-1o7nwih{display:none;position:absolute;flex-grow:0}.hidden.svelte-1o7nwih svg{display:none}.disable_click.svelte-1o7nwih{cursor:default}.icon-mode.svelte-1o7nwih{position:absolute!important;width:var(--size-4);height:var(--size-4);padding:0;min-height:0;border-radius:var(--radius-circle)}.icon-mode.svelte-1o7nwih svg{width:var(--size-4);height:var(--size-4)}.container.svelte-uu53fr.svelte-uu53fr{width:100%}time.svelte-uu53fr.svelte-uu53fr{color:var(--color-accent);font-weight:700;padding-left:var(--spacing-xs)}.timeline-wrapper.svelte-uu53fr.svelte-uu53fr{display:flex;align-items:center;justify-content:center;width:100%}.text-button.svelte-uu53fr.svelte-uu53fr{border:1px solid var(--neutral-400);border-radius:var(--radius-sm);font-weight:300;font-size:var(--size-3);text-align:center;color:var(--neutral-400);height:var(--size-5);font-weight:700;padding:0 5px;margin-left:5px}.text-button.svelte-uu53fr.svelte-uu53fr:hover,.text-button.svelte-uu53fr.svelte-uu53fr:focus{color:var(--color-accent);border-color:var(--color-accent)}.controls.svelte-uu53fr.svelte-uu53fr{display:flex;justify-content:space-between;align-items:center;margin:var(--spacing-lg);overflow:hidden}.edit-buttons.svelte-uu53fr.svelte-uu53fr{display:flex;gap:var(--spacing-sm)}@media (max-width: 320px){.controls.svelte-uu53fr.svelte-uu53fr{flex-direction:column;align-items:flex-start}.edit-buttons.svelte-uu53fr.svelte-uu53fr{margin-top:var(--spacing-sm)}.controls.svelte-uu53fr .svelte-uu53fr{margin:var(--spacing-sm)}.controls.svelte-uu53fr .text-button.svelte-uu53fr{margin-left:0}}.container.svelte-uu53fr.svelte-uu53fr{display:flex;flex-direction:column}.hidden.svelte-uu53fr.svelte-uu53fr{display:none}span.svelte-yzke89.svelte-yzke89{text-shadow:0 0 8px rgba(0,0,0,.5)}progress.svelte-yzke89.svelte-yzke89{margin-right:var(--size-3);border-radius:var(--radius-sm);width:var(--size-full);height:var(--size-2)}progress.svelte-yzke89.svelte-yzke89::-webkit-progress-bar{border-radius:2px;background-color:#fff3;overflow:hidden}progress.svelte-yzke89.svelte-yzke89::-webkit-progress-value{background-color:#ffffffe6}.mirror.svelte-yzke89.svelte-yzke89{transform:scaleX(-1)}.mirror-wrap.svelte-yzke89.svelte-yzke89{position:relative;height:100%;width:100%}.controls.svelte-yzke89.svelte-yzke89{position:absolute;bottom:0;opacity:0;transition:.5s;margin:var(--size-2);border-radius:var(--radius-md);background:var(--color-grey-800);padding:var(--size-2) var(--size-1);width:calc(100% - var(--size-2) * 2)}.wrap.svelte-yzke89:hover .controls.svelte-yzke89{opacity:1}.inner.svelte-yzke89.svelte-yzke89{display:flex;justify-content:space-between;align-items:center;padding-right:var(--size-2);padding-left:var(--size-2);width:var(--size-full);height:var(--size-full)}.icon.svelte-yzke89.svelte-yzke89{display:flex;justify-content:center;cursor:pointer;width:var(--size-6);color:#fff}.time.svelte-yzke89.svelte-yzke89{flex-shrink:0;margin-right:var(--size-3);margin-left:var(--size-3);color:#fff;font-size:var(--text-sm);font-family:var(--font-mono)}.wrap.svelte-yzke89.svelte-yzke89{position:relative;background-color:var(--background-fill-secondary);height:var(--size-full);width:var(--size-full);border-radius:var(--radius-xl)}.wrap.svelte-yzke89 video{height:var(--size-full);width:var(--size-full)}.video-container.svelte-4wejaf{height:100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.main-wrapper.svelte-4wejaf{position:relative;width:100%;height:100%;cursor:pointer}.player-wrapper.svelte-4wejaf{position:absolute;top:0;left:0;width:100%;height:100%}.player-wrapper.fixed.svelte-4wejaf{background:var(--block-background-fill)}.main-wrapper>.wrap{position:absolute;top:0;left:0;z-index:10;cursor:default}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}button.svelte-fjcd9c{cursor:pointer;width:var(--size-full)}.wrap.svelte-fjcd9c{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);height:100%;padding-top:var(--size-3)}.icon-wrap.svelte-fjcd9c{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-fjcd9c{font-size:var(--text-lg)}}.wrap.svelte-1tdan5a.svelte-1tdan5a{position:relative;width:var(--size-full);height:var(--size-full)}.hide.svelte-1tdan5a.svelte-1tdan5a{display:none}video.svelte-1tdan5a.svelte-1tdan5a{width:var(--size-full);height:var(--size-full);object-fit:contain}.button-wrap.svelte-1tdan5a.svelte-1tdan5a{position:absolute;background-color:var(--block-background-fill);border:1px solid var(--border-color-primary);padding:var(--size-1-5);display:flex;bottom:var(--size-2);left:50%;transform:translate(-50%);box-shadow:var(--shadow-drop-lg);border-radius:var(--radius-xl);line-height:var(--size-3);color:var(--button-secondary-text-color)}.icon-with-text.svelte-1tdan5a.svelte-1tdan5a{width:var(--size-20);align-items:center;margin:0 var(--spacing-xl);display:flex;justify-content:space-evenly}@media (--screen-md){button.svelte-1tdan5a.svelte-1tdan5a{bottom:var(--size-4)}}@media (--screen-xl){button.svelte-1tdan5a.svelte-1tdan5a{bottom:var(--size-8)}}.icon.svelte-1tdan5a.svelte-1tdan5a{width:18px;height:18px;display:flex;justify-content:space-between;align-items:center}.color-primary.svelte-1tdan5a.svelte-1tdan5a{fill:var(--primary-600);stroke:var(--primary-600);color:var(--primary-600)}.flip.svelte-1tdan5a.svelte-1tdan5a{transform:scaleX(-1)}.select-wrap.svelte-1tdan5a.svelte-1tdan5a{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--button-secondary-text-color);background-color:transparent;width:95%;font-size:var(--text-md);position:absolute;bottom:var(--size-2);background-color:var(--block-background-fill);box-shadow:var(--shadow-drop-lg);border-radius:var(--radius-xl);z-index:var(--layer-top);border:1px solid var(--border-color-primary);text-align:left;line-height:var(--size-4);white-space:nowrap;text-overflow:ellipsis;left:50%;transform:translate(-50%);max-width:var(--size-52)}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a{padding:.25rem .5rem;border-bottom:1px solid var(--border-color-accent);padding-right:var(--size-8);text-overflow:ellipsis;overflow:hidden}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a:hover{background-color:var(--color-accent)}.select-wrap.svelte-1tdan5a>option.svelte-1tdan5a:last-child{border:none}.inset-icon.svelte-1tdan5a.svelte-1tdan5a{position:absolute;top:5px;right:-6.5px;width:var(--size-10);height:var(--size-5);opacity:.8}@media (--screen-md){.wrap.svelte-1tdan5a.svelte-1tdan5a{font-size:var(--text-lg)}}.image-frame.svelte-1562gr6 img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.upload-container.svelte-1562gr6{display:flex;align-items:center;justify-content:center;height:100%;flex-shrink:1;max-height:100%}.reduced-height.svelte-1562gr6{height:calc(100% - var(--size-10))}.image-container.svelte-1562gr6{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;max-height:100%}.selectable.svelte-1562gr6{cursor:crosshair}.image-frame.svelte-1562gr6{object-fit:cover;width:100%;height:100%}.container.svelte-1sgcyba img{width:100%;height:100%}.container.selected.svelte-1sgcyba{border-color:var(--border-color-accent)}.border.table.svelte-1sgcyba{border:2px solid var(--border-color-primary)}.container.table.svelte-1sgcyba{margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-1sgcyba{width:var(--size-20);max-width:var(--size-20);object-fit:cover}.file-name.svelte-1kyjvp4{padding:var(--size-6);font-size:var(--text-xxl);word-break:break-all}.file-size.svelte-1kyjvp4{padding:var(--size-2);font-size:var(--text-xl)}.upload-container.svelte-1kyjvp4{height:100%;width:100%}.video-container.svelte-1kyjvp4{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center}.container.svelte-9k2sta{display:flex;flex-direction:row;gap:var(--spacing-lg);width:100%;height:100%}.video-slot.svelte-9k2sta{flex:1;display:flex;justify-content:center;align-items:center;min-height:var(--size-60);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden;position:relative}.video-slot .upload-text{color:var(--body-text-color-subdued);text-align:center}

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

@@ -0,0 +1,106 @@
+const {
+  SvelteComponent: k,
+  append_hydration: d,
+  attr: c,
+  children: w,
+  claim_element: g,
+  claim_space: y,
+  detach: o,
+  element: v,
+  init: E,
+  insert_hydration: I,
+  noop: p,
+  safe_not_equal: q,
+  space: b,
+  src_url_equal: h,
+  toggle_class: f
+} = window.__gradio__svelte__internal;
+function G(r) {
+  let e, s, n, u, i, _, a, m;
+  return {
+    c() {
+      e = v("div"), s = v("img"), u = b(), i = v("img"), a = b(), m = v("span"), this.h();
+    },
+    l(t) {
+      e = g(t, "DIV", { class: !0 });
+      var l = w(e);
+      s = g(l, "IMG", { src: !0, class: !0 }), u = y(l), i = g(l, "IMG", { src: !0, class: !0 }), a = y(l), m = g(l, "SPAN", { class: !0 }), w(m).forEach(o), l.forEach(o), this.h();
+    },
+    h() {
+      h(s.src, n = /*samples_dir*/
+      r[1] + /*value*/
+      r[0][0]) || c(s, "src", n), c(s, "class", "svelte-l4wpk0"), h(i.src, _ = /*samples_dir*/
+      r[1] + /*value*/
+      r[0][1]) || c(i, "src", _), c(i, "class", "svelte-l4wpk0"), c(m, "class", "svelte-l4wpk0"), c(e, "class", "wrap svelte-l4wpk0"), f(
+        e,
+        "table",
+        /*type*/
+        r[2] === "table"
+      ), f(
+        e,
+        "gallery",
+        /*type*/
+        r[2] === "gallery"
+      ), f(
+        e,
+        "selected",
+        /*selected*/
+        r[3]
+      );
+    },
+    m(t, l) {
+      I(t, e, l), d(e, s), d(e, u), d(e, i), d(e, a), d(e, m);
+    },
+    p(t, [l]) {
+      l & /*samples_dir, value*/
+      3 && !h(s.src, n = /*samples_dir*/
+      t[1] + /*value*/
+      t[0][0]) && c(s, "src", n), l & /*samples_dir, value*/
+      3 && !h(i.src, _ = /*samples_dir*/
+      t[1] + /*value*/
+      t[0][1]) && c(i, "src", _), l & /*type*/
+      4 && f(
+        e,
+        "table",
+        /*type*/
+        t[2] === "table"
+      ), l & /*type*/
+      4 && f(
+        e,
+        "gallery",
+        /*type*/
+        t[2] === "gallery"
+      ), l & /*selected*/
+      8 && f(
+        e,
+        "selected",
+        /*selected*/
+        t[3]
+      );
+    },
+    i: p,
+    o: p,
+    d(t) {
+      t && o(e);
+    }
+  };
+}
+function M(r, e, s) {
+  let { value: n } = e, { samples_dir: u } = e, { type: i } = e, { selected: _ = !1 } = e;
+  return r.$$set = (a) => {
+    "value" in a && s(0, n = a.value), "samples_dir" in a && s(1, u = a.samples_dir), "type" in a && s(2, i = a.type), "selected" in a && s(3, _ = a.selected);
+  }, [n, u, i, _];
+}
+class S extends k {
+  constructor(e) {
+    super(), E(this, e, M, G, q, {
+      value: 0,
+      samples_dir: 1,
+      type: 2,
+      selected: 3
+    });
+  }
+}
+export {
+  S as default
+};

src/backend/gradio_videoslider/templates/example/style.css

@@ -0,0 +1 @@
+.wrap.svelte-l4wpk0.svelte-l4wpk0{position:relative;height:var(--size-64);width:var(--size-40);overflow:hidden;border-radius:var(--radius-lg)}img.svelte-l4wpk0.svelte-l4wpk0{height:var(--size-64);width:var(--size-40);position:absolute;object-fit:cover}.wrap.selected.svelte-l4wpk0.svelte-l4wpk0{border-color:var(--color-accent)}.wrap.svelte-l4wpk0 img.svelte-l4wpk0:first-child{clip-path:inset(0 50% 0 0%)}.wrap.svelte-l4wpk0 img.svelte-l4wpk0:nth-of-type(2){clip-path:inset(0 0 0 50%)}span.svelte-l4wpk0.svelte-l4wpk0{position:absolute;top:0;left:calc(50% - .75px);height:var(--size-64);width:1.5px;background:var(--border-color-primary)}.table.svelte-l4wpk0.svelte-l4wpk0{margin:0 auto;border:2px solid var(--border-color-primary);border-radius:var(--radius-lg)}.gallery.svelte-l4wpk0.svelte-l4wpk0{border:2px solid var(--border-color-primary);object-fit:cover}

src/backend/gradio_videoslider/videoslider.py

@@ -0,0 +1,152 @@
+# In backend/videoslider.py
+from __future__ import annotations
+
+from pathlib import Path
+from typing import Any, Callable, List, Tuple
+
+from gradio_client import handle_file
+from gradio_client.documentation import document
+
+from gradio import processing_utils
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioRootModel
+from gradio.events import Events
+
+class VideoSliderData(GradioRootModel):
+    """
+    Data model for the VideoSlider component. Represents the data structure
+    sent between the frontend and backend, which is a tuple of two FileData objects.
+    """
+    root: Tuple[FileData | None, FileData | None]
+
+# Type alias for the value passed to or returned from a user's function.
+# It's a tuple of two file paths (string or Path object).
+VideoSliderValue = Tuple[str | Path | None, str | Path | None]
+
+@document()
+class VideoSlider(Component):
+    """
+    A custom Gradio component to display a side-by-side video comparison with a slider.
+    It can be used as both an input (uploading two videos) and an output (displaying two videos).
+    """
+    # The data model used for communication with the frontend.
+    data_model = VideoSliderData
+    # The events that this component can trigger.
+    EVENTS = [Events.change, Events.upload, Events.clear]
+
+    def __init__(
+        self,
+        value: Tuple[str | Path, str | Path] | Callable | None = None,
+        *,
+        height: int | None = None,
+        width: int | None = None,
+        label: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: List[str] | str | None = None,
+        position: int = 50,
+        show_download_button: bool = True,
+        show_fullscreen_button: bool = True,
+        autoplay: bool = False,
+        loop: bool = False,
+    ):
+        """
+        Initializes the VideoSlider component.
+
+        Parameters:
+            value: A tuple of two video file paths or URLs to display initially.
+            height: The height of the component in pixels.
+            width: The width of the component in pixels.
+            label: The label for this component.
+            position: The initial position of the slider, from 0 to 100.
+            autoplay: If True, the videos will start playing automatically.
+            loop: If True, the videos will loop when they finish.
+            interactive: If False, the component will be in display-only mode.
+        """
+        self.height = height
+        self.width = width
+        self.position = position
+        self.show_download_button = show_download_button
+        self.show_fullscreen_button = show_fullscreen_button
+        self.autoplay = autoplay
+        self.loop = loop
+        self.type = "filepath" # The component handles file paths.
+        
+        super().__init__(
+            label=label,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            value=value,
+        )
+
+    def preprocess(self, payload: VideoSliderData | None) -> VideoSliderValue | None:
+        """
+        Processes data from the frontend into a format usable by a Python function.
+        It converts the FileData objects into a tuple of simple string file paths.
+        """
+        if payload is None or payload.root is None:
+            return None
+        
+        video1, video2 = payload.root
+        
+        p1 = Path(video1.path) if video1 and video1.path else None
+        p2 = Path(video2.path) if video2 and video2.path else None
+        
+        return (str(p1) if p1 else None, str(p2) if p2 else None)
+
+    def postprocess(self, value: VideoSliderValue | None) -> VideoSliderData | None:
+        """
+        Processes data returned from a Python function into a format for the frontend.
+        It takes a tuple of file paths, makes them servable by Gradio, and returns
+        a VideoSliderData object.
+        """
+        if value is None or (value[0] is None and value[1] is None):
+            return None
+            
+        video1_path, video2_path = value
+        
+        fd1 = None
+        if video1_path:
+            # Copies the file to a temp cache and returns a FileData object.
+            new_path = processing_utils.move_resource_to_block_cache(video1_path, self)
+            fd1 = FileData(path=str(new_path))
+
+        fd2 = None
+        if video2_path:
+            new_path = processing_utils.move_resource_to_block_cache(video2_path, self)
+            fd2 = FileData(path=str(new_path))
+        
+        return VideoSliderData(root=(fd1, fd2))
+        
+    def api_info(self) -> dict[str, Any]:
+        """
+        Provides API information for the component.
+        """
+        return {"type": "array", "items": {"type": "string", "description": "path to video file"}, "length": 2}
+
+    def example_payload(self) -> Any:
+        """
+        Returns an example payload for the component's API documentation.
+        """
+        video_url = "https://gradio-builds.s3.amazonaws.com/demo-files/world.mp4"
+        return VideoSliderData(root=(handle_file(video_url), handle_file(video_url)))
+
+    def example_value(self) -> Any:
+        """
+        Returns an example value for the component's API documentation.
+        """
+        video_url = "https://gradio-builds.s3.amazonaws.com/demo-files/world.mp4"
+        return (video_url, video_url)

src/demo/app.py

@@ -0,0 +1,83 @@
+# In demo/app.py
+import gradio as gr
+from gradio_videoslider import VideoSlider
+import os
+
+# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
+#
+# IMPORTANT: Replace the values below with the paths to YOUR video files.
+#
+# Option A: Relative Path (if the video is in the same folder as this app.py)
+# video_path_1 = "video_antes.mp4"
+# video_path_2 = "video_depois.mp4"
+#
+# Option B: Absolute Path (the full path to the file on your computer)
+# Example for Windows:
+# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
+#
+# Example for Linux/macOS:
+# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
+
+# Set your file paths here:
+video_path_1 = "examples/SampleVideo 720x480.mp4"
+video_path_2 = "examples/SampleVideo 1280x720.mp4"
+
+
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+def process_uploaded_videos(video_inputs):
+    """This function handles the uploaded videos."""
+    print("Received videos from upload:", video_inputs)
+    return video_inputs
+
+
+# --- 3. GRADIO INTERFACE ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Slider Component Usage Examples")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
+
+    with gr.Tabs():
+        # --- TAB 1: UPLOAD EXAMPLE ---
+        with gr.TabItem("1. Compare via Upload"):
+            gr.Markdown("## Upload two videos to compare them side-by-side.")
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_output = VideoSlider(
+                label="Video comparision",
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+            submit_btn = gr.Button("Submit")
+            submit_btn.click(
+                fn=process_uploaded_videos,
+                inputs=[video_slider_input],
+                outputs=[video_slider_output]
+            )
+
+        # --- TAB 2: LOCAL FILE EXAMPLE ---
+        with gr.TabItem("2. Compare Local Files"):
+            gr.Markdown("## Example with videos pre-loaded from your local disk.")
+            
+            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
+            VideoSlider(
+                label="Video comparision",
+                value=(video_path_1, video_path_2),
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+
+# Optional: A check to give a helpful error message if files are not found.
+if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
+    print("---")
+    print(f"WARNING: Could not find one or both video files.")
+    print(f"Please make sure these paths are correct in your app.py file:")
+    print(f"  - '{os.path.abspath(video_path_1)}'")
+    print(f"  - '{os.path.abspath(video_path_2)}'")
+    print("---")
+
+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_videoslider

src/demo/space.py

@@ -0,0 +1,222 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'VideoSlider': {'description': 'A custom Gradio component to display a side-by-side video comparison with a slider.\nIt can be used as both an input (uploading two videos) and an output (displaying two videos).', 'members': {'__init__': {'value': {'type': 'typing.Union[\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path],\n    typing.Callable,\n    NoneType,\n][\n    typing.Tuple[str | pathlib.Path, str | pathlib.Path][\n        str | pathlib.Path, str | pathlib.Path\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': 'A tuple of two video file paths or URLs to display initially.'}, 'height': {'type': 'int | None', 'default': 'None', 'description': 'The height of the component in pixels.'}, 'width': {'type': 'int | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'If False, the component will be in display-only mode.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'typing.Union[typing.List[str], str, NoneType][\n    typing.List[str][str], str, None\n]', 'default': 'None', 'description': None}, 'position': {'type': 'int', 'default': '50', 'description': 'The initial position of the slider, from 0 to 100.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': None}, 'show_fullscreen_button': {'type': 'bool', 'default': 'True', 'description': None}, 'autoplay': {'type': 'bool', 'default': 'False', 'description': 'If True, the videos will start playing automatically.'}, 'loop': {'type': 'bool', 'default': 'False', 'description': 'If True, the videos will loop when they finish.'}}, 'postprocess': {'value': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ]\n][\n    typing.Tuple[\n        str | pathlib.Path | None, str | pathlib.Path | None\n    ][str | pathlib.Path | None, str | pathlib.Path | None],\n    None,\n]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the VideoSlider 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.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the VideoSlider.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the VideoSlider using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'VideoSlider': []}}}
+
+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_videoslider`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+VideoSlider Component for Gradio
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_videoslider
+```
+
+## Usage
+
+```python
+# In demo/app.py
+import gradio as gr
+from gradio_videoslider import VideoSlider
+import os
+
+# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
+#
+# IMPORTANT: Replace the values below with the paths to YOUR video files.
+#
+# Option A: Relative Path (if the video is in the same folder as this app.py)
+# video_path_1 = "video_antes.mp4"
+# video_path_2 = "video_depois.mp4"
+#
+# Option B: Absolute Path (the full path to the file on your computer)
+# Example for Windows:
+# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
+#
+# Example for Linux/macOS:
+# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
+
+# Set your file paths here:
+video_path_1 = "examples/SampleVideo 720x480.mp4"
+video_path_2 = "examples/SampleVideo 1280x720.mp4"
+
+
+# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE (remains the same) ---
+def process_uploaded_videos(video_inputs):
+    \"\"\"This function handles the uploaded videos.\"\"\"
+    print("Received videos from upload:", video_inputs)
+    return video_inputs
+
+
+# --- 3. GRADIO INTERFACE ---
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Slider Component Usage Examples")
+    gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_videoslider'>Component GitHub Code</a></span>")
+
+    with gr.Tabs():
+        # --- TAB 1: UPLOAD EXAMPLE ---
+        with gr.TabItem("1. Compare via Upload"):
+            gr.Markdown("## Upload two videos to compare them side-by-side.")
+            video_slider_input = VideoSlider(label="Your Videos", height=400, width=700)
+            video_slider_output = VideoSlider(
+                label="Video comparision",
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+            submit_btn = gr.Button("Submit")
+            submit_btn.click(
+                fn=process_uploaded_videos,
+                inputs=[video_slider_input],
+                outputs=[video_slider_output]
+            )
+
+        # --- TAB 2: LOCAL FILE EXAMPLE ---
+        with gr.TabItem("2. Compare Local Files"):
+            gr.Markdown("## Example with videos pre-loaded from your local disk.")
+            
+            # This is the key part: we pass a tuple of your local file paths to the `value` parameter.
+            VideoSlider(
+                label="Video comparision",
+                value=(video_path_1, video_path_2),
+                interactive=False,
+                autoplay=True,
+                loop=True,
+                height=400,
+                width=700
+            )
+
+# Optional: A check to give a helpful error message if files are not found.
+if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
+    print("---")
+    print(f"WARNING: Could not find one or both video files.")
+    print(f"Please make sure these paths are correct in your app.py file:")
+    print(f"  - '{os.path.abspath(video_path_1)}'")
+    print(f"  - '{os.path.abspath(video_path_2)}'")
+    print("---")
+
+if __name__ == '__main__':
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `VideoSlider`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["VideoSlider"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["VideoSlider"]["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.
+
+
+
+ ```python
+def predict(
+    value: typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]
+) -> typing.Optional[
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ]
+][
+    typing.Tuple[
+        str | pathlib.Path | None, str | pathlib.Path | None
+    ][str | pathlib.Path | None, str | pathlib.Path | None],
+    None,
+]:
+    return value
+```
+""", elem_classes=["md-custom", "VideoSlider-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          VideoSlider: [], };
+    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/examples/SampleVideo 1280x720.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f25b31f155970c46300934bda4a76cd2f581acab45c49762832ffdfddbcf9fdd
+size 1055736

src/examples/Samplevideo 720x480.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:99d1ffc857ae1c12f0c378e7503a0057232e920ab6666a35f55caab37d43322a
+size 564010

src/frontend/Example.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	export let value: [string, string];
+	export let samples_dir: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<!-- TODO: fix -->
+<!-- svelte-ignore a11y-missing-attribute -->
+<div
+	class="wrap"
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	<img src={samples_dir + value[0]} />
+
+	<img src={samples_dir + value[1]} />
+	<span></span>
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		height: var(--size-64);
+		width: var(--size-40);
+		overflow: hidden;
+		border-radius: var(--radius-lg);
+	}
+	img {
+		height: var(--size-64);
+		width: var(--size-40);
+		position: absolute;
+		/* border-radius: var(--radius-lg); */
+		/* max-width: none; */
+		object-fit: cover;
+	}
+
+	.wrap.selected {
+		border-color: var(--color-accent);
+	}
+	.wrap img:first-child {
+		clip-path: inset(0 50% 0 0%);
+	}
+
+	.wrap img:nth-of-type(2) {
+		clip-path: inset(0 0 0 50%);
+	}
+	span {
+		position: absolute;
+		top: 0;
+		left: calc(50% - 0.75px);
+		height: var(--size-64);
+		width: 1.5px;
+		background: var(--border-color-primary);
+	}
+
+	.table {
+		margin: 0 auto;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+	}
+
+	.gallery {
+		border: 2px solid var(--border-color-primary);
+		/* max-height: var(--size-20); */
+		object-fit: cover;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,154 @@
+<!-- videoslider/frontend/Index.svelte -->
+<!-- Enable programmatic access to the component's props from outside. -->
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	// Import Gradio types and common components.
+	import type { Gradio } from "@gradio/utils";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { FileData } from "@gradio/client";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	
+	// Import the two main views for this component.
+	import VideoSliderPreview from "./shared/VideoSliderPreview.svelte";
+	import InteractiveVideoSlider from "./shared/InteractiveVideoSlider.svelte";
+
+	// ------------------
+	// Props from Backend
+	// ------------------
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	/** The core value of the component: a tuple of two video files. */
+	export let value: [FileData | null, FileData | null] = [null, null];
+	export let label: string;
+	export let show_label: boolean;
+	export let root: string;
+	export let height: number | undefined;
+	export let width: number | undefined;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus;
+	/** If false, the component is in display-only mode. */
+	export let interactive: boolean;
+	export let show_download_button: boolean;
+	export let show_fullscreen_button: boolean;
+	/** The initial position of the slider, from 0 to 100. */
+	export let position: number;
+	export let autoplay: boolean;
+	export let loop: boolean;
+	/** The Gradio event dispatcher. */
+	export let gradio: Gradio<{
+		change: never;
+		clear: never;
+		upload: never;
+		error: string;
+	}>;
+
+	// -----------------
+	// Internal State
+	// -----------------
+	/** Holds the fullscreen state for the component. */
+	let fullscreen = false;
+	/** Stores the previous value to detect changes. */
+	let old_value: [FileData | null, FileData | null] = [null, null];
+	/** Tracks if the user is dragging over the upload area. */
+	let dragging = false;
+	
+	// -----------------
+	// Reactive Logic
+	// -----------------
+	/** Converts the 0-100 position from Python to a 0-1 scale for CSS. */
+	$: normalised_slider_position = Math.max(0, Math.min(100, position)) / 100;
+
+	/** Dispatches a 'change' event whenever the `value` prop is updated from within the component. */
+	$: {
+		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+	}
+</script>
+
+<!-- 
+	This block acts as a router. 
+	It displays one of two sub-components based on the `interactive` prop from the backend.
+-->
+{#if !interactive}
+	<!-- Static/Output Mode: Shows the side-by-side video player with a slider. -->
+	<Block
+		{visible}
+		variant={"solid"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{height}
+		{width}
+		{container}
+		{scale}
+		{min_width}
+		allow_overflow={false}
+		bind:fullscreen
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+		<VideoSliderPreview
+			bind:value
+			{interactive}
+			{label}
+			{show_label}
+			{show_download_button}
+			{show_fullscreen_button}
+			i18n={gradio.i18n}
+			position={normalised_slider_position}
+			slider_color="var(--border-color-primary)"
+			on:clear={() => gradio.dispatch("clear")}
+			on:fullscreen={({ detail }) => { fullscreen = detail; }}
+			{autoplay}
+			{loop}
+			upload={(...args) => gradio.client.upload(...args)}
+		/>
+	</Block>
+{:else}
+	<!-- Interactive/Input Mode: Shows two upload boxes for the user to add videos. -->
+	<Block
+		{visible}
+		variant={"solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={true}
+		{elem_id}
+		{elem_classes}
+		{height}
+		{width}
+		{container}
+		{scale}
+		{min_width}
+		allow_overflow={false}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+		/>
+		<InteractiveVideoSlider
+			bind:value
+			{root}
+			on:upload={() => gradio.dispatch("upload")}
+			on:clear={() => gradio.dispatch("clear")}
+			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			{label}
+			{show_label}
+			max_file_size={gradio.max_file_size}
+			i18n={gradio.i18n}
+			upload={(...args) => gradio.client.upload(...args)}	
+			stream_handler={gradio.client?.stream} 		
+			{autoplay}
+			{loop}			
+		/>
+	</Block>
+{/if}

src/frontend/gradio.config.js

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

src/frontend/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "gradio_videoslider",
+  "version": "0.1.0",
+  "description": "A video slider component for Gradio to compare two videos.",
+  "type": "module",
+  "author": "",
+  "license": "Apache-2.0",
+  "private": false,
+  "dependencies": {
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "@types/d3-drag": "^3.0.7",
+    "@types/d3-selection": "^3.0.11",
+    "@ffmpeg/ffmpeg": "^0.12.7",
+    "@ffmpeg/util": "^0.12.1",
+    "hls.js": "^1.5.13",
+    "mrmime": "^2.0.0",
+    "@gradio/atoms": "0.16.3",
+    "@gradio/client": "1.15.5",
+    "@gradio/icons": "0.12.0",
+    "@gradio/image": "0.22.12",
+    "@gradio/statustracker": "0.10.14",
+    "@gradio/upload": "0.16.10",
+    "@gradio/utils": "0.10.2",
+    "@gradio/wasm": "0.18.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/videoslider"
+  }
+}

src/frontend/shared/InteractiveVideo.svelte

@@ -0,0 +1,194 @@
+<!--
+@component
+This component provides an interactive area for a single video. It can handle
+uploading a video file, recording from a webcam, or displaying an existing video.
+It's a building block for more complex components like the InteractiveVideoSlider.
+-->
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { Upload } from "@gradio/upload";
+	import type { FileData, Client } from "@gradio/client";
+	import { BlockLabel, SelectSource } from "@gradio/atoms";
+	import { Webcam } from "@gradio/image";
+	import { Video } from "@gradio/icons";
+	import type { WebcamOptions } from "./utils";
+	import { prettyBytes } from "./utils";
+	import Player from "./Player.svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	// ------------------
+	// Props
+	// ------------------
+	/** The FileData object representing the current video. */
+	export let value: FileData | null = null;
+	export let subtitle: FileData | null = null;
+	/** The available input sources, e.g., 'upload', 'webcam'. */
+	export let sources:
+		| ["webcam"]
+		| ["upload"]
+		| ["webcam", "upload"]
+		| ["upload", "webcam"] = ["webcam", "upload"];
+	export let label: string | undefined = undefined;
+	export let show_download_button = false;
+	export let show_label = true;
+	export let webcam_options: WebcamOptions;
+	export let include_audio: boolean;
+	export let autoplay: boolean;
+	export let root: string;
+	export let i18n: I18nFormatter;
+	/** The currently selected input source. */
+	export let active_source: "webcam" | "upload" = "webcam";
+	export let handle_reset_value: () => void = () => {};
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let loop: boolean;
+	export let uploading = false;
+
+	// -----------------
+	// Internal State
+	// -----------------
+	/** Tracks if the video has been edited (e.g., trimmed). */
+	let has_change_history = false;
+	/** Tracks if the user is dragging a file over the component. */
+	let dragging = false;
+
+	const dispatch = createEventDispatcher<{
+		change: FileData | null;
+		drag: boolean;
+		error: string;
+		upload: FileData;
+	}>();
+
+	// -----------------
+	// Event Handlers
+	// -----------------
+
+	/** Handles the 'load' event from the Upload component. */
+	function handle_load({ detail }: CustomEvent<FileData | null>): void {
+		value = detail;
+		dispatch("change", detail);
+		dispatch("upload", detail!);
+	}
+
+	/** Handles the 'clear' event. */
+	function handle_clear(): void {
+		value = null;
+		dispatch("change", null);
+	}
+
+	/** Handles changes from the Player (e.g., after trimming). */
+	function handle_change(video: FileData): void {
+		has_change_history = true;
+		dispatch("change", video);
+	}
+
+	/** Handles a new video captured from the webcam. */
+	function handle_capture({
+		detail
+	}: CustomEvent<FileData | any | null>): void {
+		dispatch("change", detail);
+	}
+
+	/** Dispatches the 'drag' event when the dragging state changes. */
+	$: dispatch("drag", dragging);
+</script>
+
+<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
+
+<div data-testid="video" class="video-container">
+	<!-- If no video is loaded, show the upload or webcam interface. -->
+	{#if value === null || value.url === undefined}
+		<div class="upload-container">
+			{#if active_source === "upload"}
+				<Upload
+					bind:dragging
+					bind:uploading
+					filetype="video/x-m4v,video/*"
+					on:load={handle_load}
+					{max_file_size}
+					on:error={({ detail }) => dispatch("error", detail)}
+					{root}
+					{upload}
+					{stream_handler}
+					aria_label={i18n("video.drop_to_upload")}
+				>
+					<slot />
+				</Upload>
+			{:else if active_source === "webcam"}
+				<Webcam
+					{root}
+					mirror_webcam={webcam_options.mirror}
+					webcam_constraints={webcam_options.constraints}
+					{include_audio}
+					mode="video"
+					on:error
+					on:capture={handle_capture}
+					on:start_recording
+					on:stop_recording
+					{i18n}
+					{upload}
+					stream_every={1}
+				/>
+			{/if}
+		</div>
+	<!-- If a video is loaded, display the player. -->
+	{:else if value?.url}
+		<!-- Use a key to force re-rendering of the Player when the video URL changes. -->
+		{#key value?.url}
+			<Player
+				{upload}
+				{root}
+				interactive
+				src={value.url}
+				subtitle={subtitle?.url}
+				is_stream={false}
+				mirror={webcam_options.mirror && active_source === "webcam"}
+				{label}
+				{handle_change}
+				{handle_reset_value}
+				{loop}
+				{value}
+				{i18n}
+				{show_download_button}
+				{handle_clear}
+				{has_change_history}
+			/>
+		{/key}
+	<!-- Fallback for file data without a URL (e.g., before upload completes). -->
+	{:else if value.size}
+		<div class="file-name">{value.orig_name || value.url}</div>
+		<div class="file-size">
+			{prettyBytes(value.size)}
+		</div>
+	{/if}
+
+	<!-- Show the source selection buttons (upload/webcam). -->
+	<SelectSource {sources} bind:active_source {handle_clear} />
+</div>
+
+<style>
+	.file-name {
+		padding: var(--size-6);
+		font-size: var(--text-xxl);
+		word-break: break-all;
+	}
+
+	.file-size {
+		padding: var(--size-2);
+		font-size: var(--text-xl);
+	}
+
+	.upload-container {
+		height: 100%;
+		width: 100%;
+	}
+
+	.video-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

src/frontend/shared/InteractiveVideoSlider.svelte

@@ -0,0 +1,139 @@
+<!--
+@component
+This component provides the user interface for uploading two videos side-by-side.
+It acts as the "input" mode for the main VideoSlider component. It uses two
+instances of the InteractiveVideo component to handle the individual uploads.
+-->
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { FileData, Client } from "@gradio/client";
+	import type { I18nFormatter } from "@gradio/utils";
+	import type { WebcamOptions } from "./utils";
+
+	import InteractiveVideo from "./InteractiveVideo.svelte";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Video as VideoIcon } from "@gradio/icons";
+
+	// ------------------
+	// Props
+	// ------------------
+	/** The core value: a tuple containing the two uploaded video files. */
+	export let value: [FileData | null, FileData | null] = [null, null];
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let root: string;
+	export let i18n: I18nFormatter;
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"]; 
+	export let autoplay: boolean;
+	export let loop: boolean;
+	
+	const dispatch = createEventDispatcher<{
+		upload: [FileData | null, FileData | null];
+		clear: void;
+		error: string;
+	}>();
+
+	/** Default options for webcam recording, passed down to the child component. */
+	const webcam_options: WebcamOptions = {
+		mirror: true,
+		constraints: {}
+	};
+
+	/**
+	 * Handles the 'change' event from either of the child InteractiveVideo components.
+	 * It updates the correct slot in the `value` tuple and dispatches an event.
+	 * @param detail The new FileData object from the child component.
+	 * @param slot The index (0 for left, 1 for right) of the video that changed.
+	 */
+	function handle_change(
+		detail: FileData | null,
+		slot: 0 | 1
+	): void {
+		const new_value: [FileData | null, FileData | null] = [...value];
+		new_value[slot] = detail;
+		value = new_value;
+
+		if (value[0] === null && value[1] === null) {
+			dispatch("clear");
+		} else {
+			dispatch("upload", new_value);
+		}
+	}
+</script>
+
+<BlockLabel {show_label} Icon={VideoIcon} label={label || "Video Slider"} />
+
+<div class="container" data-testid="video-slider-input">
+	<!-- Left Video Slot -->
+	<div class="video-slot">
+		<InteractiveVideo
+			value={value[0]}
+			on:change={({ detail }) => handle_change(detail, 0)}
+			sources={["upload"]}
+			active_source="upload"
+			{root}
+			{upload}
+			{stream_handler}
+			{i18n}
+			{max_file_size}
+			show_label={false}
+			{webcam_options}
+			{autoplay}
+			{loop}
+			include_audio={true}
+		>
+			<!-- This text is displayed inside the upload box. -->
+			<p class="upload-text">Upload Video 1</p>
+		</InteractiveVideo>
+	</div>
+
+	<!-- Right Video Slot -->
+	<div class="video-slot">
+		<InteractiveVideo
+			value={value[1]}
+			on:change={({ detail }) => handle_change(detail, 1)}
+			sources={["upload"]}
+			active_source="upload"
+			{root}
+			{upload}
+			{stream_handler}
+			{i18n}
+			{max_file_size}
+			show_label={false}
+			{webcam_options}
+			{autoplay}
+			{loop}
+			include_audio={true}
+		>
+			<p class="upload-text">Upload Video 2</p>
+		</InteractiveVideo>
+	</div>
+</div>
+
+<style>
+	.container {
+		display: flex;
+		flex-direction: row;
+		gap: var(--spacing-lg);
+		width: 100%;
+		height: 100%;
+	}
+	.video-slot {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: var(--size-60);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		position: relative;
+	}
+	/* Use :global to style the slotted content passed to the child component. */
+	:global(.video-slot .upload-text) {
+		color: var(--body-text-color-subdued);
+        text-align: center;
+	}
+</style>

src/frontend/shared/Player.svelte

@@ -0,0 +1,311 @@
+<!--
+@component
+This component is a self-contained video player. It wraps the base <Video>
+component and adds a custom control bar for play/pause, timeline scrubbing,
+and fullscreen. It also integrates with VideoControls for editing features.
+-->
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { Play, Pause, Maximise, Undo } from "@gradio/icons";
+	import Video from "./Video.svelte";
+	import VideoControls from "./VideoControls.svelte";
+	import type { FileData, Client } from "@gradio/client";
+	import { prepare_files } from "@gradio/client";
+	import { format_time } from "@gradio/utils";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	// ------------------
+	// Props
+	// ------------------
+	export let root = "";
+	export let src: string;
+	export let subtitle: string | null = null;
+	export let mirror: boolean;
+	export let loop: boolean;
+	export let muted = false;
+	export let label = "test";
+	/** If true, shows editing controls like trim. */
+	export let interactive = false;
+	export let handle_change: (video: FileData) => void = () => {};
+	export let handle_reset_value: () => void = () => {};
+	export let upload: Client["upload"];
+	export let is_stream: boolean | undefined;
+	export let i18n: I18nFormatter;
+	export let show_download_button = false;
+	export let value: FileData | null = null;
+	export let handle_clear: () => void = () => {};
+	export let has_change_history = false;
+
+	const dispatch = createEventDispatcher<{
+		play: undefined;
+		pause: undefined;
+		stop: undefined;
+		end: undefined;
+		clear: undefined;
+		loadeddata: undefined;
+	}>();
+
+	// -----------------
+	// Internal State
+	// -----------------
+	/** The current playback time of the video, in seconds. */
+	let time = 0;
+	/** The total duration of the video, in seconds. */
+	let duration: number;
+	/** The paused state of the video. */
+	let paused = true;
+	/** A direct reference to the underlying HTML <video> element. */
+	let video: HTMLVideoElement;
+	/** A prop to export the video element reference to parent components. */
+	export let video_el: HTMLVideoElement;
+	/** A flag to show a loading state during video processing (e.g., trimming). */
+	let processingVideo = false;
+
+	// -----------------
+	// Event Handlers
+	// -----------------
+
+	/** Handles scrubbing the video timeline with a mouse or touch drag. */
+	function handleMove(e: TouchEvent | MouseEvent): void {
+		if (!duration) return;
+
+		if (e.type === "click") {
+			handle_click(e as MouseEvent);
+			return;
+		}
+
+		if (e.type !== "touchmove" && !((e as MouseEvent).buttons & 1)) return;
+
+		const clientX =
+			e.type === "touchmove"
+				? (e as TouchEvent).touches[0].clientX
+				: (e as MouseEvent).clientX;
+		const { left, right } = (
+			e.currentTarget as HTMLProgressElement
+		).getBoundingClientRect();
+		time = (duration * (clientX - left)) / (right - left);
+	}
+
+	/** Toggles the video between playing and paused states. */
+	async function play_pause(): Promise<void> {
+		if (document.fullscreenElement != video) {
+			const isPlaying =
+				video.currentTime > 0 &&
+				!video.paused &&
+				!video.ended &&
+				video.readyState > video.HAVE_CURRENT_DATA;
+
+			if (!isPlaying) {
+				await video.play();
+			} else video.pause();
+		}
+	}
+
+	/** Handles a single click on the progress bar to seek to a specific time. */
+	function handle_click(e: MouseEvent): void {
+		const { left, right } = (
+			e.currentTarget as HTMLProgressElement
+		).getBoundingClientRect();
+		time = (duration * (e.clientX - left)) / (right - left);
+	}
+
+	/** Dispatches events when the video playback ends. */
+	function handle_end(): void {
+		dispatch("stop");
+		dispatch("end");
+	}
+
+	/** Handles the video trimming process. */
+	const handle_trim_video = async (videoBlob: Blob): Promise<void> => {
+		let _video_blob = new File([videoBlob], "video.mp4");
+		const val = await prepare_files([_video_blob]);
+		let value = ((await upload(val, root))?.filter(Boolean) as FileData[])[0];
+
+		handle_change(value);
+	};
+
+	/** Enters fullscreen mode for the video. */
+	function open_full_screen(): void {
+		video.requestFullscreen();
+	}
+
+	// -----------------
+	// Reactive Logic
+	// -----------------
+	/** Ensures `time` and `duration` are never NaN. */
+	$: time = time || 0;
+	$: duration = duration || 0;
+	/** Passes the internal video element reference to the exported prop. */
+	$: video_el = video;
+</script>
+
+<div class="wrap">
+	<div class="mirror-wrap" class:mirror>
+		<Video
+			{src}
+			preload="auto"
+			{loop}
+			{muted}
+			{is_stream}
+			on:click={play_pause}
+			on:play={() => dispatch("play")}
+			on:pause={() => dispatch("pause")}
+			on:loadeddata={() => dispatch("loadeddata")}
+			on:error
+			on:ended={handle_end}
+			bind:currentTime={time}
+			bind:duration
+			bind:paused
+			bind:node={video}
+			data-testid={`${label}-player`}
+			{processingVideo}
+		>
+			<track kind="captions" src={subtitle} default />
+		</Video>
+		
+	</div>
+
+	<!-- The custom video controls overlay -->
+	<div class="controls">
+		<div class="inner">
+			<span
+				role="button"
+				tabindex="0"
+				class="icon"
+				aria-label="play-pause-replay-button"
+				on:click={play_pause}
+				on:keydown={play_pause}
+			>
+				{#if time === duration}
+					<Undo />
+				{:else if paused}
+					<Play />
+				{:else}
+					<Pause />
+				{/if}
+			</span>
+
+			<span class="time">{format_time(time)} / {format_time(duration)}</span>
+			
+			<progress
+				value={time / duration || 0}
+				on:mousemove={handleMove}
+				on:touchmove|preventDefault={handleMove}
+				on:click|stopPropagation|preventDefault={handle_click}
+			/>
+
+			<div
+				role="button"
+				tabindex="0"
+				class="icon"
+				aria-label="full-screen"
+				on:click={open_full_screen}
+				on:keypress={open_full_screen}
+			>
+				<Maximise />
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- If in interactive mode, show the additional editing controls below the player. -->
+{#if interactive}
+	<VideoControls
+		videoElement={video}
+		showRedo
+		{handle_trim_video}
+		{handle_reset_value}
+		bind:processingVideo
+		{value}
+		{i18n}
+		{show_download_button}
+		{handle_clear}
+		{has_change_history}
+	/>
+{/if}
+
+<style lang="postcss">
+	span {
+		text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+	}
+
+	progress {
+		margin-right: var(--size-3);
+		border-radius: var(--radius-sm);
+		width: var(--size-full);
+		height: var(--size-2);
+	}
+
+	progress::-webkit-progress-bar {
+		border-radius: 2px;
+		background-color: rgba(255, 255, 255, 0.2);
+		overflow: hidden;
+	}
+
+	progress::-webkit-progress-value {
+		background-color: rgba(255, 255, 255, 0.9);
+	}
+
+	.mirror {
+		transform: scaleX(-1);
+	}
+
+	.mirror-wrap {
+		position: relative;
+		height: 100%;
+		width: 100%;
+	}
+
+	.controls {
+		position: absolute;
+		bottom: 0;
+		opacity: 0;
+		transition: 500ms;
+		margin: var(--size-2);
+		border-radius: var(--radius-md);
+		background: var(--color-grey-800);
+		padding: var(--size-2) var(--size-1);
+		width: calc(100% - var(--size-2) * 2);
+	}
+	.wrap:hover .controls {
+		opacity: 1;
+	}
+
+	.inner {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-right: var(--size-2);
+		padding-left: var(--size-2);
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.icon {
+		display: flex;
+		justify-content: center;
+		cursor: pointer;
+		width: var(--size-6);
+		color: white;
+	}
+
+	.time {
+		flex-shrink: 0;
+		margin-right: var(--size-3);
+		margin-left: var(--size-3);
+		color: white;
+		font-size: var(--text-sm);
+		font-family: var(--font-mono);
+	}
+	.wrap {
+		position: relative;
+		background-color: var(--background-fill-secondary);
+		height: var(--size-full);
+		width: var(--size-full);
+		border-radius: var(--radius-xl);
+	}
+	.wrap :global(video) {
+		height: var(--size-full);
+		width: var(--size-full);
+	}
+</style>

src/frontend/shared/Slider.svelte

@@ -0,0 +1,249 @@
+<!--
+@component
+A general-purpose draggable slider component that can be laid over other content.
+It uses d3-drag for robust drag handling and is designed to differentiate
+between a "drag" action and a "click" action.
+-->
+<script lang="ts">
+    import { onMount, createEventDispatcher } from "svelte";
+    import { drag } from "d3-drag";
+    import { select } from "d3-selection";
+
+    /** A utility function to constrain a value within a minimum and maximum range. */
+    function clamp(value: number, min: number, max: number): number {
+        return Math.min(Math.max(value, min), max);
+    }
+
+    // ------------------
+    // Props
+    // ------------------
+    /** The slider's position as a normalized value (0 to 1). Can be two-way bound. */
+    export let position = 0.5;
+    /** If true, disables all dragging and interaction. */
+    export let disabled = false;
+    /** The color of the vertical slider line. */
+    export let slider_color = "var(--border-color-primary)";
+    /** Layout-related props, typically bound from the parent, used for calculating pixel positions. */
+    export let image_size: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    } = { top: 0, left: 0, width: 0, height: 0 };
+    export let el: HTMLDivElement | undefined = undefined;
+    export let parent_el: HTMLDivElement | undefined = undefined;
+    
+    /** Dispatches a 'click' event ONLY if the user clicks the handle without dragging. */
+    const dispatch = createEventDispatcher<{ click: MouseEvent }>();
+
+    // -----------------
+    // Internal State
+    // -----------------
+    let inner: Element;
+    /** The slider's horizontal position in pixels. */
+    let px = 0;
+    /** True while the user is actively dragging the handle. */
+    let active = false;
+    let container_width = 0;
+    
+    let drag_start_x: number;
+    /** A flag to determine if a drag action actually moved, differentiating it from a simple click. */
+    let was_dragged = false;
+
+    // -----------------
+    // Functions
+    // -----------------
+
+    /** Calculates the slider's pixel position based on its container's dimensions. */
+    function set_position(width: number): void {
+        container_width = parent_el?.getBoundingClientRect().width || 0;
+        if (width === 0) {
+            image_size.width = el?.getBoundingClientRect().width || 0;
+        }
+        px = clamp(
+            image_size.width * position + image_size.left,
+            0,
+            container_width
+        );
+    }
+
+    function round(n: number, points: number): number {
+        const mod = Math.pow(10, points);
+        return Math.round((n + Number.EPSILON) * mod) / mod;
+    }
+
+    /** Updates the internal state based on the drag's x-coordinate. */
+    function update_position(x: number): void {
+        px = clamp(x, 0, container_width);
+        position = round((x - image_size.left) / image_size.width, 5);
+    }
+
+    // --- D3 Drag Event Handlers ---
+
+    function drag_start(event: any): void {
+        if (disabled) return;
+        active = true;
+        update_position(event.x);
+        drag_start_x = event.x;
+        was_dragged = false;
+    }
+
+    function drag_move(event: any): void {
+        if (disabled) return;
+        update_position(event.x);
+        if (Math.abs(event.x - drag_start_x) > 3) {
+            was_dragged = true;
+        }
+    }
+
+    function drag_end(event: any): void {
+        if (disabled) return;
+        active = false;
+        if (!was_dragged) {
+            dispatch("click", event.sourceEvent);
+        }
+    }
+
+    /** Updates the pixel position when the `position` prop changes from the parent. */
+    function update_position_from_pc(pc: number): void {
+        px = clamp(image_size.width * pc + image_size.left, 0, container_width);
+    }
+
+    // -----------------
+    // Lifecycle & Reactive Logic
+    // -----------------
+    $: set_position(image_size.width);
+    $: update_position_from_pc(position);
+
+    onMount(() => {
+        set_position(image_size.width);
+        const drag_handler = drag()
+            .on("start", drag_start)
+            .on("drag", drag_move)
+            .on("end", drag_end);
+        select(inner).call(drag_handler);
+    });
+</script>
+
+<!-- Recalculate position on window resize. -->
+<svelte:window on:resize={() => set_position(image_size.width)} />
+
+<div class="wrap" role="none" bind:this={parent_el}>
+    <!-- The content from the parent component is placed here. -->
+    <div class="content" bind:this={el}>
+        <slot />
+    </div>
+
+    <!-- This is the draggable handle area. -->
+    <div
+        class="outer"
+        class:disabled
+        bind:this={inner}
+        role="none"
+        style="transform: translateX({px}px)"
+        class:grab={active}
+		on:click={(event) => event.stopPropagation()}
+    >
+        <span class="icon-wrap" class:active class:disabled>
+			<span class="icon left">◢</span>
+			<span class="icon center" style:--color={slider_color}></span>
+			<span class="icon right">◢</span>
+		</span>
+        <!-- This is the visible vertical line of the slider. -->
+        <div class="inner" style:--color={slider_color}></div>
+    </div>
+</div>
+
+<style>
+    .wrap {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        z-index: var(--layer-1);
+        overflow: hidden;
+    }
+
+    .icon-wrap {
+        display: block;
+        position: absolute;
+        top: 50%;
+        transform: translate(-20.5px, -50%);
+        left: 10px;
+        width: 40px;
+        transition: 0.2s;
+        color: var(--body-text-color);
+        height: 30px;
+        border-radius: 5px;
+        background-color: var(--color-accent);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: var(--layer-3);
+        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
+        font-size: 12px;
+    }
+
+    .icon.left {
+        transform: rotate(135deg);
+        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+    }
+
+    .icon.right {
+        transform: rotate(-45deg);
+        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+    }
+
+    .icon.center {
+        display: block;
+        width: 1px;
+        height: 100%;
+        background-color: var(--color);
+        opacity: 0.1;
+    }
+
+    .icon-wrap.active {
+        opacity: 0;
+    }
+
+    .icon-wrap.disabled {
+        opacity: 0;
+    }
+
+    .outer {
+        width: 20px;
+        height: 100%;
+        position: absolute;
+        cursor: grab;
+        top: 0;
+        left: -10px;
+        pointer-events: auto;
+        z-index: var(--layer-2);
+    }
+    .grab {
+        cursor: grabbing;
+    }
+
+    .inner {
+        width: 1px;
+        height: 100%;
+        background: var(--color);
+        position: absolute;
+        left: calc((100% - 2px) / 2);
+    }
+
+    .disabled {
+        cursor: auto;
+    }
+
+    .disabled .inner {
+        box-shadow: none;
+    }
+
+    .content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>

src/frontend/shared/Video.svelte

@@ -0,0 +1,219 @@
+<!--
+@component
+This is the foundational video component, a wrapper around the native HTML `<video>` tag.
+It adds advanced functionality like HLS streaming support and compatibility with
+Gradio's WebAssembly (Wasm) environment. It also forwards native video events
+to parent components.
+-->
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { HTMLVideoAttributes } from "svelte/elements";
+	import { createEventDispatcher } from "svelte";
+	import { loaded } from "./utils";
+
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+
+	import Hls from "hls.js";
+
+	// ------------------
+	// Props
+	// ------------------
+
+	// --- Standard Video Attributes ---
+	export let src: HTMLVideoAttributes["src"] = undefined;
+	export let muted: HTMLVideoAttributes["muted"] = undefined;
+	export let playsinline: HTMLVideoAttributes["playsinline"] = undefined;
+	export let preload: HTMLVideoAttributes["preload"] = undefined;
+	export let autoplay: HTMLVideoAttributes["autoplay"] = undefined;
+	export let controls: HTMLVideoAttributes["controls"] = undefined;
+	export let loop: boolean;
+	
+	// --- Two-way Bound State ---
+	export let currentTime: number | undefined = undefined;
+	export let duration: number | undefined = undefined;
+	export let paused: boolean | undefined = undefined;
+
+	// --- Specialized Props ---
+	/** A direct reference to the underlying HTML <video> element. */
+	export let node: HTMLVideoElement | undefined = undefined;
+	/** If true, the source is an HLS stream and will be handled by hls.js. */
+	export let is_stream;
+	/** If true, displays a loading overlay on the video. */
+	export let processingVideo = false;
+
+	// -----------------
+	// Internal State
+	// -----------------
+	let resolved_src: typeof src;
+	let stream_active = false;
+
+	// This block handles resolving video sources in a WebAssembly (Wasm) environment.
+	// It prevents UI flickering by showing the original `src` immediately while the
+	// Wasm-compatible source is being resolved asynchronously.
+	let latest_src: typeof src;
+	$: {
+		resolved_src = src;
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
+	}
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Initializes and attaches an HLS.js player to the video element for streaming.
+	 * This is only triggered when the `is_stream` prop is true.
+	 * @param src The URL of the HLS manifest (.m3u8 file).
+	 * @param is_stream A flag to enable or disable this functionality.
+	 * @param node The HTML video element to attach the stream to.
+	 */
+	function load_stream(
+		src: string | null | undefined,
+		is_stream: boolean,
+		node: HTMLVideoElement
+	): void {
+		if (!src || !is_stream) return;
+
+		if (Hls.isSupported() && !stream_active) {
+			const hls = new Hls({
+				// Low-latency configuration
+				maxBufferLength: 1,
+				maxMaxBufferLength: 1,
+				lowLatencyMode: true
+			});
+			hls.loadSource(src);
+			hls.attachMedia(node);
+			hls.on(Hls.Events.MANIFEST_PARSED, function () {
+				(node as HTMLVideoElement).play();
+			});
+			hls.on(Hls.Events.ERROR, function (event, data) {
+				if (data.fatal) {
+					switch (data.type) {
+						case Hls.ErrorTypes.NETWORK_ERROR:
+							hls.startLoad();
+							break;
+						case Hls.ErrorTypes.MEDIA_ERROR:
+							hls.recoverMediaError();
+							break;
+						default:
+							hls.destroy();
+							break;
+					}
+				}
+			});
+			stream_active = true;
+		}
+	}
+
+	/** Reset the HLS stream when the video source changes. */
+	$: src, (stream_active = false);
+
+	/** Trigger the HLS stream loader if the source is a stream. */
+	$: if (node && src && is_stream) {
+		load_stream(src, is_stream, node);
+	}
+</script>
+
+<!--
+A necessary comment explaining a Svelte-specific quirk:
+The spread operator with `$$props` or `$$restProps` can't be used here
+to pass props from the parent component to the <video> element
+because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
+-->
+<div class:hidden={!processingVideo} class="overlay">
+	<span class="load-wrap">
+		<span class="loader" />
+	</span>
+</div>
+<video
+	src={resolved_src}
+	{muted}
+	{playsinline}
+	{preload}
+	{autoplay}
+	{controls}
+	{loop}
+	
+	
+	on:loadeddata={dispatch.bind(null, "loadeddata")}
+	on:click={dispatch.bind(null, "click")}
+	on:play={dispatch.bind(null, "play")}
+	on:pause={dispatch.bind(null, "pause")}
+	on:ended={dispatch.bind(null, "ended")}
+	on:error={dispatch.bind(null, "error", "Video not playable")}
+	
+	
+	bind:currentTime
+	bind:duration
+	bind:paused
+	bind:this={node}
+
+	
+	use:loaded={{ autoplay: autoplay ?? false }}
+
+	data-testid={$$props["data-testid"]}
+	crossorigin="anonymous"
+>
+	<slot />
+</video>
+
+<style>
+	.overlay {
+		position: absolute;
+		background-color: rgba(0, 0, 0, 0.4);
+		width: 100%;
+		height: 100%;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.load-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+
+	.loader {
+		display: flex;
+		position: relative;
+		background-color: var(--border-color-accent-subdued);
+		animation: shadowPulse 2s linear infinite;
+		box-shadow:
+			-24px 0 var(--border-color-accent-subdued),
+			24px 0 var(--border-color-accent-subdued);
+		margin: var(--spacing-md);
+		border-radius: 50%;
+		width: 10px;
+		height: 10px;
+		scale: 0.5;
+	}
+
+	@keyframes shadowPulse {
+		33% {
+			box-shadow:
+				-24px 0 var(--border-color-accent-subdued),
+				24px 0 #fff;
+			background: #fff;
+		}
+		66% {
+			box-shadow:
+				-24px 0 #fff,
+				24px 0 #fff;
+			background: var(--border-color-accent-subdued);
+		}
+		100% {
+			box-shadow:
+				-24px 0 #fff,
+				24px 0 var(--border-color-accent-subdued);
+			background: #fff;
+		}
+	}
+</style>

src/frontend/shared/VideoControls.svelte

@@ -0,0 +1,228 @@
+<!--
+@component
+This component provides editing controls for a video, such as trimming.
+It appears below the main player when in `interactive` mode. It uses FFmpeg
+(loaded in the browser via WebAssembly) to perform the trimming operation.
+-->
+<script lang="ts">
+	import { Undo, Trim, Clear } from "@gradio/icons";
+	import VideoTimeline from "./VideoTimeline.svelte";
+	import { trimVideo } from "./utils";
+	import { FFmpeg } from "@ffmpeg/ffmpeg";
+	import loadFfmpeg from "./utils";
+	import { onMount } from "svelte";
+	import { format_time } from "@gradio/utils";
+	import { IconButton } from "@gradio/atoms";
+	import { ModifyUpload } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
+
+	// ------------------
+	// Props
+	// ------------------
+	/** A direct reference to the HTML <video> element to be controlled. */
+	export let videoElement: HTMLVideoElement;
+	/** If true, shows the 'Undo' button. */
+	export let showRedo = false;
+	export let interactive = true;
+	/** The current editing mode (e.g., 'edit' for trimming). */
+	export let mode = "";
+	/** A callback function to reset the video to its original state. */
+	export let handle_reset_value: () => void;
+	/** A callback function to handle the new, trimmed video blob. */
+	export let handle_trim_video: (videoBlob: Blob) => void;
+	/** Two-way bound prop to indicate if the video is currently being processed by FFmpeg. */
+	export let processingVideo = false;
+	export let i18n: (key: string) => string;
+	export let value: FileData | null = null;
+	export let show_download_button = false;
+	export let handle_clear: () => void = () => {};
+	/** True if the video has a previous state to revert to. */
+	export let has_change_history = false;
+
+	// -----------------
+	// Internal State
+	// -----------------
+	/** The FFmpeg instance. */
+	let ffmpeg: FFmpeg;
+	/** The duration of the selected trim region. */
+	let trimmedDuration: number | null = null;
+	/** The start time of the trim, in seconds. */
+	let dragStart = 0;
+	/** The end time of the trim, in seconds. */
+	let dragEnd = 0;
+	/** A flag to show a loading state while the timeline generates thumbnails. */
+	let loadingTimeline = false;
+
+	/** Load the FFmpeg library when the component is first mounted. */
+	onMount(async () => {
+		ffmpeg = await loadFfmpeg();
+	});
+
+	/** When entering edit mode, initialize the trimmed duration to the full video duration. */
+	$: if (mode === "edit" && trimmedDuration === null && videoElement)
+		trimmedDuration = videoElement.duration;
+	
+	/** Toggles the video trimming UI on and off. */
+	const toggleTrimmingMode = (): void => {
+		if (mode === "edit") {
+			mode = "";
+			trimmedDuration = videoElement.duration;
+		} else {
+			mode = "edit";
+		}
+	};
+</script>
+
+<!-- The trimming UI, which is only visible when mode is 'edit'. -->
+<div class="container" class:hidden={mode !== "edit"}>
+	{#if mode === "edit"}
+		<div class="timeline-wrapper">
+			<VideoTimeline
+				{videoElement}
+				bind:dragStart
+				bind:dragEnd
+				bind:trimmedDuration
+				bind:loadingTimeline
+			/>
+		</div>
+	{/if}
+
+	<div class="controls" data-testid="waveform-controls">
+		{#if mode === "edit" && trimmedDuration !== null}
+			<time
+				aria-label="duration of selected region in seconds"
+				class:hidden={loadingTimeline}>{format_time(trimmedDuration)}</time
+			>
+			<div class="edit-buttons">
+				<button
+					class:hidden={loadingTimeline}
+					class="text-button"
+					on:click={() => {
+						mode = "";
+						processingVideo = true;
+						trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
+							.then((videoBlob) => {
+								handle_trim_video(videoBlob);
+							})
+							.then(() => {
+								processingVideo = false;
+							});
+					}}>Trim</button
+				>
+				<button
+					class="text-button"
+					class:hidden={loadingTimeline}
+					on:click={toggleTrimmingMode}>Cancel</button
+				>
+			</div>
+		{:else}
+			<div />
+		{/if}
+	</div>
+</div>
+
+<!-- Standard controls like Clear, Download, Undo, and Trim. -->
+<ModifyUpload
+	{i18n}
+	on:clear={() => handle_clear()}
+	download={show_download_button ? value?.url : null}
+>
+	{#if showRedo && mode === ""}
+		<IconButton
+			Icon={Undo}
+			label="Reset video to initial value"
+			disabled={processingVideo || !has_change_history}
+			on:click={() => {
+				handle_reset_value();
+				mode = "";
+			}}
+		/>
+	{/if}
+
+	{#if interactive && mode === ""}
+		<IconButton
+			Icon={Trim}
+			label="Trim video to selection"
+			disabled={processingVideo}
+			on:click={toggleTrimmingMode}
+		/>
+	{/if}
+</ModifyUpload>
+
+<style>
+	.container {
+		width: 100%;
+	}
+	time {
+		color: var(--color-accent);
+		font-weight: bold;
+		padding-left: var(--spacing-xs);
+	}
+
+	.timeline-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.text-button {
+		border: 1px solid var(--neutral-400);
+		border-radius: var(--radius-sm);
+		font-weight: 300;
+		font-size: var(--size-3);
+		text-align: center;
+		color: var(--neutral-400);
+		height: var(--size-5);
+		font-weight: bold;
+		padding: 0 5px;
+		margin-left: 5px;
+	}
+
+	.text-button:hover,
+	.text-button:focus {
+		color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+
+	.controls {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: var(--spacing-lg);
+		overflow: hidden;
+	}
+
+	.edit-buttons {
+		display: flex;
+		gap: var(--spacing-sm);
+	}
+
+	@media (max-width: 320px) {
+		.controls {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.edit-buttons {
+			margin-top: var(--spacing-sm);
+		}
+
+		.controls * {
+			margin: var(--spacing-sm);
+		}
+
+		.controls .text-button {
+			margin-left: 0;
+		}
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.hidden {
+		display: none;
+	}
+</style>

src/frontend/shared/VideoSliderPreview.svelte

@@ -0,0 +1,235 @@
+<!--
+@component
+This component provides the display-only view for the VideoSlider. It shows two
+videos side-by-side, with a draggable slider to reveal one over the other. It
+also handles synchronized play/pause functionality for both videos.
+-->
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { FileData, Client } from "@gradio/client";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	import Slider from "./Slider.svelte";
+	import Player from "./Player.svelte";
+
+	import { BlockLabel, Empty, IconButton, IconButtonWrapper, FullscreenButton } from "@gradio/atoms";
+	import { Video as VideoIcon, Download, Clear } from "@gradio/icons";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+
+	// ------------------
+	// Props
+	// ------------------
+	export let value: [FileData | null, FileData | null] = [null, null];
+	export let label: string | undefined = undefined;
+	export let show_download_button = true;
+	export let show_label: boolean;
+	export let i18n: I18nFormatter;
+	/** The normalized (0-1) position of the slider. */
+	export let position: number;
+	export let slider_color: string;
+	export let show_fullscreen_button = true;
+	export let fullscreen = false;
+	export let interactive = true;
+	export let autoplay = false;
+	export let loop = false;
+	export let upload: Client["upload"];
+
+	const dispatch = createEventDispatcher<{ clear: void }>();
+
+	// -----------------
+	// Internal State
+	// -----------------
+	/** A direct reference to the master HTML <video> element. */
+	let video1_el: HTMLVideoElement;
+	/** A direct reference to the slave HTML <video> element. */
+	let video2_el: HTMLVideoElement;
+	
+	/** A flag that becomes true once the master video has loaded its data. */
+	let video_is_ready = false;
+	/** A flag to ensure the initial autoplay logic runs only once. */
+	let initial_autoplay_done = false;
+
+	/** A reactive CSS style to create the "reveal" effect based on the slider's position. */
+	$: style = `clip-path: inset(0 0 0 ${position * 100}%)`;
+
+	// -----------------
+	// Event Handlers
+	// -----------------
+
+	/** Sets a flag to true when the master video signals it's ready to play. */
+	function handle_video_ready(): void {
+		video_is_ready = true;
+	}
+
+	/** Toggles play/pause for both videos simultaneously when the user interacts. */
+	function toggle_playback(): void {
+		if (!video1_el || !video2_el) {
+			return;
+		}
+
+		const is_paused = video1_el.paused;
+
+		if (is_paused) {
+			video1_el.play().catch(() => {});
+			video2_el.play().catch(() => {});
+		} else {
+			video1_el.pause();
+			video2_el.pause();
+		}
+	}
+
+	// -----------------
+	// Reactive Logic
+	// -----------------
+	$: {
+		// This block handles initial autoplay once all conditions are met, preventing race conditions.
+		if (video1_el && video_is_ready && autoplay && !initial_autoplay_done) {
+			video1_el.play().catch(() => {});
+			initial_autoplay_done = true;
+		}
+
+		// This block continuously synchronizes the slave video to the master video.
+		if (video1_el && video2_el) {
+			// Sync playback time.
+			if (Math.abs(video1_el.currentTime - video2_el.currentTime) > 0.1) {
+				video2_el.currentTime = video1_el.currentTime;
+			}
+
+			// Sync play/pause state.
+			if (video1_el.paused !== video2_el.paused) {
+				if (video1_el.paused) {
+					video2_el.pause();
+				} else {
+					video2_el.play().catch(() => {});
+				}
+			}
+		}
+	}
+</script>
+
+<BlockLabel {show_label} Icon={VideoIcon} label={label || "Video Slider"} />
+
+<!-- Show an empty state if no videos are provided. -->
+{#if value === null || value[0] === null || value[1] === null}
+	<Empty unpadded_box={true} size="large"><VideoIcon /></Empty>
+{:else}
+	<div class="video-container">
+		<IconButtonWrapper>
+            {#if show_fullscreen_button}
+                <FullscreenButton {fullscreen} on:fullscreen />
+            {/if}
+
+            {#if show_download_button && value[1]}
+                <DownloadLink href={value[1].meta?._base64 || value[1].url} download={value[1].orig_name || "video"}>
+                    <IconButton Icon={Download} label={i18n("common.download")} />
+                </DownloadLink>
+            {/if}
+			
+            {#if interactive}
+                <IconButton
+                    Icon={Clear}
+                    label="Remove Videos"
+                    on:click={(event) => {
+                        value = [null, null];
+                        dispatch("clear");
+                        event.stopPropagation();
+                    }}
+                />
+            {/if}
+		</IconButtonWrapper>
+
+		<!-- This main wrapper handles clicks for the entire area and makes it accessible. -->
+		<div
+			class="main-wrapper"
+			on:click={toggle_playback}
+			on:keydown={(event) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					toggle_playback();
+				}
+			}}
+			role="button"
+			tabindex="0"
+		>
+			<!-- The first (bottom) video player. -->
+			<div class="player-wrapper">
+				{#if value[0]}
+					<Player
+						src={value[0].meta?._base64 || value[0].url}
+						bind:video_el={video1_el}
+						on:loadeddata={handle_video_ready}
+						{loop}
+						muted={true}
+						{i18n}
+						{upload}
+						mirror={false}
+						is_stream={value[0].is_stream}
+						interactive={false}
+					/>
+				{/if}
+			</div>
+
+			<!-- The second (top, clipped) video player. -->
+			<div class="player-wrapper fixed" {style}>
+				{#if value[1]}
+					<Player
+						src={value[1].meta?._base64 || value[1].url}
+						bind:video_el={video2_el} 
+						{loop}
+						muted={true}
+						{i18n}
+						{upload}
+						mirror={false}
+						is_stream={value[1].is_stream}
+						interactive={false}
+					/>
+				{/if}
+			</div>
+
+			<!-- The slider is an overlay for dragging, but does not handle clicks. -->
+			<Slider 
+				bind:position 
+				{slider_color}
+			/>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.video-container {
+		height: 100%;
+		width: 100%;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+
+	.main-wrapper {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+	}
+
+	.player-wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.player-wrapper.fixed {
+		background: var(--block-background-fill);
+	}
+
+	/* Ensure the Slider component is layered on top of the video players. */
+	:global(.main-wrapper > .wrap) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 10;
+		cursor: default;
+	}
+</style>

src/frontend/shared/VideoTimeline.svelte

@@ -0,0 +1,312 @@
+<!--
+@component
+This component displays a visual timeline of a video, composed of generated
+thumbnails. It features draggable start and end handles, allowing a user to
+select a specific segment of the video for trimming.
+-->
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+
+	// ------------------
+	// Props
+	// ------------------
+	/** A direct reference to the HTML <video> element to be analyzed. */
+	export let videoElement: HTMLVideoElement;
+	/** The calculated duration of the selected trim region (two-way bound). */
+	export let trimmedDuration: number | null;
+	/** The start time of the selection in seconds (two-way bound). */
+	export let dragStart: number;
+	/** The end time of the selection in seconds (two-way bound). */
+	export let dragEnd: number;
+	/** A flag indicating if the timeline is currently being generated (two-way bound). */
+	export let loadingTimeline: boolean;
+
+	// -----------------
+	// Internal State
+	// -----------------
+	/** An array of base64-encoded thumbnail images. */
+	let thumbnails: string[] = [];
+	let numberOfThumbnails = 10;
+	let videoDuration: number;
+	
+	/** The percentage-based position of the left and right drag handles. */
+	let leftHandlePosition = 0;
+	let rightHandlePosition = 100;
+	
+	/** The currently active drag handle ('left', 'right', or null). */
+	let dragging: string | null = null;
+
+	// -----------------
+	// Functions
+	// -----------------
+
+	const startDragging = (side: string | null): void => {
+		dragging = side;
+	};
+
+	const stopDragging = (): void => {
+		dragging = null;
+	};
+
+	/**
+	 * Handles the movement of a drag handle, updating its position and the
+	 * corresponding video playback time.
+	 * @param event The mouse event.
+	 * @param distance Optional distance for keyboard-based movement.
+	 */
+	const drag = (event: { clientX: number }, distance?: number): void => {
+		if (dragging) {
+			const timeline = document.getElementById("timeline");
+			if (!timeline) return;
+
+			const rect = timeline.getBoundingClientRect();
+			let newPercentage: number;
+
+			if (distance) {
+				// Move handle based on arrow key press.
+				newPercentage =
+					dragging === "left"
+						? leftHandlePosition + distance
+						: rightHandlePosition + distance;
+			} else {
+				// Move handle based on mouse drag.
+				newPercentage = ((event.clientX - rect.left) / rect.width) * 100;
+			}
+
+			newPercentage = Math.max(0, Math.min(newPercentage, 100));
+
+			if (dragging === "left") {
+				leftHandlePosition = Math.min(newPercentage, rightHandlePosition);
+				const newTimeLeft = (leftHandlePosition / 100) * videoDuration;
+				videoElement.currentTime = newTimeLeft; // Seek video to new start time
+				dragStart = newTimeLeft;
+			} else if (dragging === "right") {
+				rightHandlePosition = Math.max(newPercentage, leftHandlePosition);
+				const newTimeRight = (rightHandlePosition / 100) * videoDuration;
+				videoElement.currentTime = newTimeRight; // Seek video to new end time
+				dragEnd = newTimeRight;
+			}
+
+			const startTime = (leftHandlePosition / 100) * videoDuration;
+			const endTime = (rightHandlePosition / 100) * videoDuration;
+			trimmedDuration = endTime - startTime;
+		}
+	};
+
+	/** Handles moving the drag handles with the arrow keys for accessibility. */
+	const moveHandle = (e: KeyboardEvent): void => {
+		if (dragging) {
+			const distance = (1 / videoDuration) * 100;
+
+			if (e.key === "ArrowLeft") {
+				drag({ clientX: 0 }, -distance);
+			} else if (e.key === "ArrowRight") {
+				drag({ clientX: 0 }, distance);
+			}
+		}
+	};
+
+	/** Generates a single thumbnail by drawing the current video frame to a canvas. */
+	const generateThumbnail = (): void => {
+		const canvas = document.createElement("canvas");
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		canvas.width = videoElement.videoWidth;
+		canvas.height = videoElement.videoHeight;
+		ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+
+		const thumbnail: string = canvas.toDataURL("image/jpeg", 0.7);
+		thumbnails = [...thumbnails, thumbnail];
+	};
+
+	// -----------------
+	// Lifecycle
+	// -----------------
+
+	/** A reactive statement that updates the loading state based on thumbnail generation. */
+	$: loadingTimeline = thumbnails.length !== numberOfThumbnails;
+
+	onMount(() => {
+		/**
+		 * Orchestrates the thumbnail generation process by seeking the video to
+		 * different time points and capturing a frame at each point.
+		 */
+		const loadMetadata = (): void => {
+			videoDuration = videoElement.duration;
+			dragEnd = videoDuration;
+			const interval = videoDuration / numberOfThumbnails;
+			let captures = 0;
+
+			const onSeeked = (): void => {
+				generateThumbnail();
+				captures++;
+
+				if (captures < numberOfThumbnails) {
+					videoElement.currentTime += interval;
+				} else {
+					videoElement.removeEventListener("seeked", onSeeked);
+				}
+			};
+
+			videoElement.addEventListener("seeked", onSeeked);
+			videoElement.currentTime = 0; // Start the seeking process
+		};
+
+		// Wait for the video's metadata to be loaded before starting.
+		if (videoElement.readyState >= 1) {
+			loadMetadata();
+		} else {
+			videoElement.addEventListener("loadedmetadata", loadMetadata);
+		}
+
+		// Add global event listeners for dragging.
+		window.addEventListener("mousemove", drag);
+		window.addEventListener("mouseup", stopDragging);
+		window.addEventListener("keydown", moveHandle);
+	});
+
+	onDestroy(() => {
+		// Clean up global event listeners to prevent memory leaks.
+		window.removeEventListener("mousemove", drag);
+		window.removeEventListener("mouseup", stopDragging);
+		window.removeEventListener("keydown", moveHandle);
+	});
+</script>
+
+<div class="container">
+	<!-- Show a loader while thumbnails are being generated. -->
+	{#if loadingTimeline}
+		<div class="load-wrap">
+			<span aria-label="loading timeline" class="loader" />
+		</div>
+	<!-- Once loaded, display the timeline. -->
+	{:else}
+		<div id="timeline" class="thumbnail-wrapper">
+			<!-- The left (start) drag handle. -->
+			<button
+				aria-label="start drag handle for trimming video"
+				class="handle left"
+				on:mousedown={() => startDragging("left")}
+				on:blur={stopDragging}
+				on:keydown={(e) => {
+					if (e.key === 'ArrowLeft' || e.key == 'ArrowRight') {
+						startDragging("left");
+					}
+				}}
+				style="left: {leftHandlePosition}%;"
+			/>
+
+			<!-- The colored overlay indicating the selected region. -->
+			<div
+				class="opaque-layer"
+				style="left: {leftHandlePosition}%; right: {100 - rightHandlePosition}%"
+			/>
+
+			<!-- The generated video frame thumbnails. -->
+			{#each thumbnails as thumbnail, i (i)}
+				<img src={thumbnail} alt={`frame-${i}`} draggable="false" />
+			{/each}
+
+			<!-- The right (end) drag handle. -->
+			<button
+				aria-label="end drag handle for trimming video"
+				class="handle right"
+				on:mousedown={() => startDragging("right")}
+				on:blur={stopDragging}
+				on:keydown={(e) => {
+					if (e.key === 'ArrowLeft' || e.key == 'ArrowRight') {
+						startDragging("right");
+					}
+				}}
+				style="left: {rightHandlePosition}%;"
+			/>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.load-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+	.loader {
+		display: flex;
+		position: relative;
+		background-color: var(--border-color-accent-subdued);
+		animation: shadowPulse 2s linear infinite;
+		box-shadow:
+			-24px 0 var(--border-color-accent-subdued),
+			24px 0 var(--border-color-accent-subdued);
+		margin: var(--spacing-md);
+		border-radius: 50%;
+		width: 10px;
+		height: 10px;
+		scale: 0.5;
+	}
+
+	@keyframes shadowPulse {
+		33% {
+			box-shadow:
+				-24px 0 var(--border-color-accent-subdued),
+				24px 0 #fff;
+			background: #fff;
+		}
+		66% {
+			box-shadow:
+				-24px 0 #fff,
+				24px 0 #fff;
+			background: var(--border-color-accent-subdued);
+		}
+		100% {
+			box-shadow:
+				-24px 0 #fff,
+				24px 0 var(--border-color-accent-subdued);
+			background: #fff;
+		}
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
+	}
+
+	#timeline {
+		display: flex;
+		height: var(--size-10);
+		flex: 1;
+		position: relative;
+	}
+
+	img {
+		flex: 1 1 auto;
+		min-width: 0;
+		object-fit: cover;
+		height: var(--size-12);
+		border: 1px solid var(--block-border-color);
+		user-select: none;
+		z-index: 1;
+	}
+
+	.handle {
+		width: 3px;
+		background-color: var(--color-accent);
+		cursor: ew-resize;
+		height: var(--size-12);
+		z-index: 3;
+		position: absolute;
+	}
+
+	.opaque-layer {
+		background-color: rgba(230, 103, 40, 0.25);
+		border: 1px solid var(--color-accent);
+		height: var(--size-12);
+		position: absolute;
+		z-index: 2;
+	}
+</style>

src/frontend/shared/utils.ts

@@ -0,0 +1,151 @@
+import { toBlobURL } from "@ffmpeg/util";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { lookup } from "mrmime";
+
+export const prettyBytes = (bytes: number): string => {
+	let units = ["B", "KB", "MB", "GB", "PB"];
+	let i = 0;
+	while (bytes > 1024) {
+		bytes /= 1024;
+		i++;
+	}
+	let unit = units[i];
+	return bytes.toFixed(1) + " " + unit;
+};
+
+export const playable = (): boolean => {
+	// TODO: Fix this
+	// let video_element = document.createElement("video");
+	// let mime_type = mime.lookup(filename);
+	// return video_element.canPlayType(mime_type) != "";
+	return true; // FIX BEFORE COMMIT - mime import causing issues
+};
+
+export function loaded(
+	node: HTMLVideoElement,
+	{ autoplay }: { autoplay: boolean }
+): any {
+	async function handle_playback(): Promise<void> {
+		if (!autoplay) return;
+		await node.play();
+	}
+
+	node.addEventListener("loadeddata", handle_playback);
+
+	return {
+		destroy(): void {
+			node.removeEventListener("loadeddata", handle_playback);
+		}
+	};
+}
+
+export default async function loadFfmpeg(): Promise<FFmpeg> {
+	const ffmpeg = new FFmpeg();
+	const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
+
+	await ffmpeg.load({
+		coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
+		wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm")
+	});
+
+	return ffmpeg;
+}
+
+export function blob_to_data_url(blob: Blob): Promise<string> {
+	return new Promise((fulfill, reject) => {
+		let reader = new FileReader();
+		reader.onerror = reject;
+		reader.onload = () => fulfill(reader.result as string);
+		reader.readAsDataURL(blob);
+	});
+}
+
+export async function trimVideo(
+	ffmpeg: FFmpeg,
+	startTime: number,
+	endTime: number,
+	videoElement: HTMLVideoElement
+): Promise<any> {
+	const videoUrl = videoElement.src;
+	const mimeType = lookup(videoElement.src) || "video/mp4";
+	const blobUrl = await toBlobURL(videoUrl, mimeType);
+	const response = await fetch(blobUrl);
+	const vidBlob = await response.blob();
+	const type = getVideoExtensionFromMimeType(mimeType) || "mp4";
+	const inputName = `input.${type}`;
+	const outputName = `output.${type}`;
+
+	try {
+		if (startTime === 0 && endTime === 0) {
+			return vidBlob;
+		}
+
+		await ffmpeg.writeFile(
+			inputName,
+			new Uint8Array(await vidBlob.arrayBuffer())
+		);
+
+		let command = [
+			"-i",
+			inputName,
+			...(startTime !== 0 ? ["-ss", startTime.toString()] : []),
+			...(endTime !== 0 ? ["-to", endTime.toString()] : []),
+			"-c:a",
+			"copy",
+			outputName
+		];
+
+		await ffmpeg.exec(command);
+		const outputData = await ffmpeg.readFile(outputName);
+		const outputBlob = new Blob([outputData], {
+			type: `video/${type}`
+		});
+
+		return outputBlob;
+	} catch (error) {
+		console.error("Error initializing FFmpeg:", error);
+		return vidBlob;
+	}
+}
+
+const getVideoExtensionFromMimeType = (mimeType: string): string | null => {
+	const videoMimeToExtensionMap: { [key: string]: string } = {
+		"video/mp4": "mp4",
+		"video/webm": "webm",
+		"video/ogg": "ogv",
+		"video/quicktime": "mov",
+		"video/x-msvideo": "avi",
+		"video/x-matroska": "mkv",
+		"video/mpeg": "mpeg",
+		"video/3gpp": "3gp",
+		"video/3gpp2": "3g2",
+		"video/h261": "h261",
+		"video/h263": "h263",
+		"video/h264": "h264",
+		"video/jpeg": "jpgv",
+		"video/jpm": "jpm",
+		"video/mj2": "mj2",
+		"video/mpv": "mpv",
+		"video/vnd.ms-playready.media.pyv": "pyv",
+		"video/vnd.uvvu.mp4": "uvu",
+		"video/vnd.vivo": "viv",
+		"video/x-f4v": "f4v",
+		"video/x-fli": "fli",
+		"video/x-flv": "flv",
+		"video/x-m4v": "m4v",
+		"video/x-ms-asf": "asf",
+		"video/x-ms-wm": "wm",
+		"video/x-ms-wmv": "wmv",
+		"video/x-ms-wmx": "wmx",
+		"video/x-ms-wvx": "wvx",
+		"video/x-sgi-movie": "movie",
+		"video/x-smv": "smv"
+	};
+
+	return videoMimeToExtensionMap[mimeType] || null;
+};
+
+export interface WebcamOptions {
+	mirror: boolean;
+	constraints: Record<string, any>;
+}

src/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

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_videoslider"
+version = "0.0.1"
+description = "VideoSlider Component for Gradio"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "YOUR NAME", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "gradio-template-ImageSlider"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.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_videoslider/templates", "*.pyi", "/\\backend\\gradio_videoslider\\templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_videoslider"]