Upload folder using huggingface_hub

.gitignore

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

README.md

@@ -1,12 +1,259 @@
 ---
-title: Gradio Iframecomponent
-emoji: 🔥
-colorFrom: pink
-colorTo: red
+tags: [gradio-custom-component, SimpleTextbox]
+title: gradio_iframecomponent
+short_description: iframe
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
-sdk_version: 5.33.1
-app_file: app.py
 pinned: false
+app_file: space.py
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# `gradio_iframecomponent`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+iframe
+
+## Installation
+
+```bash
+pip install gradio_iframecomponent
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_iframecomponent import IFrame
+
+def create_demo():
+    with gr.Blocks() as demo:
+        gr.Markdown("# IFrame Component Demo")
+        
+        iframe = IFrame(
+            label="Web Page Viewer",
+            value="https://www.gradio.app",
+            interactive=True,
+            height=500
+        )
+        
+        url_input = gr.Textbox(
+            label="Enter URL",
+            placeholder="https://example.com"
+        )
+        
+        load_btn = gr.Button("Load URL")
+        
+        load_btn.click(
+            fn=lambda url: url,
+            inputs=url_input,
+            outputs=iframe
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()
+
+```
+
+## `IFrame`
+
+### 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
+str
+```
+
+</td>
+<td align="left"><code>""</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>src</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>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | int
+```
+
+</td>
+<td align="left"><code>"100%"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | int
+```
+
+</td>
+<td align="left"><code>400</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>sandbox</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>interactive</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>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
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</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">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the IFrame 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. |
+| `input` | This listener is triggered when the user changes the value of the IFrame. |
+
+
+
+### 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: str | None
+ ) -> str | None:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,32 @@
+import gradio as gr
+from gradio_iframecomponent import IFrame
+
+def create_demo():
+    with gr.Blocks() as demo:
+        gr.Markdown("# IFrame Component Demo")
+        
+        iframe = IFrame(
+            label="Web Page Viewer",
+            value="https://www.gradio.app",
+            interactive=True,
+            height=500
+        )
+        
+        url_input = gr.Textbox(
+            label="Enter URL",
+            placeholder="https://example.com"
+        )
+        
+        load_btn = gr.Button("Load URL")
+        
+        load_btn.click(
+            fn=lambda url: url,
+            inputs=url_input,
+            outputs=iframe
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    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_iframecomponent

space.py

@@ -0,0 +1,153 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'IFrame': {'description': 'A custom Gradio component for embedding iframes.', 'members': {'__init__': {'value': {'type': 'str', 'default': '""', 'description': None}, 'src': {'type': 'str | None', 'default': 'None', 'description': None}, 'width': {'type': 'str | int', 'default': '"100%"', 'description': None}, 'height': {'type': 'str | int', 'default': '400', 'description': None}, 'sandbox': {'type': 'str | None', 'default': 'None', 'description': None}, 'interactive': {'type': 'bool', 'default': 'True', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'True', 'description': None}}, 'postprocess': {'value': {'type': 'str | None', 'description': None}}, 'preprocess': {'return': {'type': 'str | None', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the IFrame 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.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the IFrame.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'IFrame': []}}}
+
+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_iframecomponent`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+iframe
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_iframecomponent
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_iframecomponent import IFrame
+
+def create_demo():
+    with gr.Blocks() as demo:
+        gr.Markdown("# IFrame Component Demo")
+        
+        iframe = IFrame(
+            label="Web Page Viewer",
+            value="https://www.gradio.app",
+            interactive=True,
+            height=500
+        )
+        
+        url_input = gr.Textbox(
+            label="Enter URL",
+            placeholder="https://example.com"
+        )
+        
+        load_btn = gr.Button("Load URL")
+        
+        load_btn.click(
+            fn=lambda url: url,
+            inputs=url_input,
+            outputs=iframe
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `IFrame`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["IFrame"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["IFrame"]["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: str | None
+) -> str | None:
+    return value
+```
+""", elem_classes=["md-custom", "IFrame-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          IFrame: [], };
+    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/.pypirc

@@ -0,0 +1,3 @@
+[pypi]
+username = __token__
+password = pypi-AgEIcHlwaS5vcmcCJDZmMjUxMWYwLTlhMTAtNDZlZi1hNDhiLWE0NTdiYzgxZTFkMQACKlszLCJmMjMyNDM4NC04Y2FjLTQ3ODgtYjk4OC00NTgyMzRlNjA0NzAiXQAABiBHk0w9VX_ToWSOZP7Ulx_dkbMMWAUrU_uIPmlxdBMp4A

src/README.md

@@ -0,0 +1,259 @@
+---
+tags: [gradio-custom-component, SimpleTextbox]
+title: gradio_iframecomponent
+short_description: iframe
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_iframecomponent`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+iframe
+
+## Installation
+
+```bash
+pip install gradio_iframecomponent
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_iframecomponent import IFrame
+
+def create_demo():
+    with gr.Blocks() as demo:
+        gr.Markdown("# IFrame Component Demo")
+        
+        iframe = IFrame(
+            label="Web Page Viewer",
+            value="https://www.gradio.app",
+            interactive=True,
+            height=500
+        )
+        
+        url_input = gr.Textbox(
+            label="Enter URL",
+            placeholder="https://example.com"
+        )
+        
+        load_btn = gr.Button("Load URL")
+        
+        load_btn.click(
+            fn=lambda url: url,
+            inputs=url_input,
+            outputs=iframe
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()
+
+```
+
+## `IFrame`
+
+### 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
+str
+```
+
+</td>
+<td align="left"><code>""</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>src</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>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | int
+```
+
+</td>
+<td align="left"><code>"100%"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | int
+```
+
+</td>
+<td align="left"><code>400</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>sandbox</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>interactive</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>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
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</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">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the IFrame 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. |
+| `input` | This listener is triggered when the user changes the value of the IFrame. |
+
+
+
+### 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: str | None
+ ) -> str | None:
+     return value
+ ```
+ 

src/backend/gradio_iframecomponent/__init__.py

@@ -0,0 +1,4 @@
+
+from .iframecomponent import IFrame
+
+__all__ = ['IFrame']

src/backend/gradio_iframecomponent/iframecomponent.py

@@ -0,0 +1,80 @@
+from __future__ import annotations
+from typing import Any, Callable, Literal
+import gradio as gr
+from gradio.components.base import Component
+from gradio.events import Events
+
+class IFrame(Component):
+    """
+    A custom Gradio component for embedding iframes.
+    """
+    
+    EVENTS = [Events.change, Events.input]
+    
+    def __init__(
+        self,
+        value: str = "",
+        *,
+        src: str | None = None,
+        width: str | int = "100%", 
+        height: str | int = 400,
+        sandbox: str | None = None,
+        interactive: bool = True,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        label: str | None = None,
+        show_label: bool = True,
+        **kwargs,
+    ):
+        self.src = src
+        self.width = width
+        self.height = height
+        self.sandbox = sandbox or "allow-scripts allow-same-origin"
+        
+        super().__init__(
+            value=value,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            label=label,
+            show_label=show_label,
+            **kwargs,
+        )
+
+    def preprocess(self, payload: str | None) -> str | None:
+        """Process input from frontend to backend."""
+        return payload
+
+    def postprocess(self, value: str | None) -> str | None:
+        """Process output from backend to frontend."""
+        if value is None:
+            return None
+            
+        if self.src or (value.startswith('http') and '<iframe' not in value):
+            url = self.src or value
+            return f"""
+            <iframe 
+                src="{url}"
+                width="{self.width}"
+                height="{self.height}"
+                sandbox="{self.sandbox}"
+                frameborder="0"
+            ></iframe>
+            """
+        return value
+
+    def example_payload(self) -> Any:
+        """Example input for API usage - must be JSON-serializable."""
+        return "https://www.gradio.app"
+
+    def example_value(self) -> Any:
+        """Example value for component development."""
+        return "https://www.gradio.app"
+
+    def api_info(self) -> dict[str, Any]:
+        """JSON-schema representation for API."""
+        return {"type": "string"}

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

@@ -0,0 +1,126 @@
+const {
+  SvelteComponent: h,
+  add_iframe_resize_listener: g,
+  add_render_callback: v,
+  append_hydration: y,
+  attr: b,
+  binding_callbacks: m,
+  children: w,
+  claim_element: z,
+  claim_text: k,
+  detach: c,
+  element: p,
+  init: E,
+  insert_hydration: S,
+  noop: o,
+  safe_not_equal: q,
+  set_data: C,
+  text: D,
+  toggle_class: _
+} = window.__gradio__svelte__internal, { onMount: I } = window.__gradio__svelte__internal;
+function M(t) {
+  let e, i = (
+    /*value*/
+    (t[0] ? (
+      /*value*/
+      t[0]
+    ) : "") + ""
+  ), s, d;
+  return {
+    c() {
+      e = p("div"), s = D(i), this.h();
+    },
+    l(l) {
+      e = z(l, "DIV", { class: !0 });
+      var n = w(e);
+      s = k(n, i), n.forEach(c), this.h();
+    },
+    h() {
+      b(e, "class", "svelte-84cxb8"), v(() => (
+        /*div_elementresize_handler*/
+        t[5].call(e)
+      )), _(
+        e,
+        "table",
+        /*type*/
+        t[1] === "table"
+      ), _(
+        e,
+        "gallery",
+        /*type*/
+        t[1] === "gallery"
+      ), _(
+        e,
+        "selected",
+        /*selected*/
+        t[2]
+      );
+    },
+    m(l, n) {
+      S(l, e, n), y(e, s), d = g(
+        e,
+        /*div_elementresize_handler*/
+        t[5].bind(e)
+      ), t[6](e);
+    },
+    p(l, [n]) {
+      n & /*value*/
+      1 && i !== (i = /*value*/
+      (l[0] ? (
+        /*value*/
+        l[0]
+      ) : "") + "") && C(s, i), n & /*type*/
+      2 && _(
+        e,
+        "table",
+        /*type*/
+        l[1] === "table"
+      ), n & /*type*/
+      2 && _(
+        e,
+        "gallery",
+        /*type*/
+        l[1] === "gallery"
+      ), n & /*selected*/
+      4 && _(
+        e,
+        "selected",
+        /*selected*/
+        l[2]
+      );
+    },
+    i: o,
+    o,
+    d(l) {
+      l && c(e), d(), t[6](null);
+    }
+  };
+}
+function P(t, e) {
+  t.style.setProperty("--local-text-width", `${e && e < 150 ? e : 200}px`), t.style.whiteSpace = "unset";
+}
+function V(t, e, i) {
+  let { value: s } = e, { type: d } = e, { selected: l = !1 } = e, n, r;
+  I(() => {
+    P(r, n);
+  });
+  function u() {
+    n = this.clientWidth, i(3, n);
+  }
+  function f(a) {
+    m[a ? "unshift" : "push"](() => {
+      r = a, i(4, r);
+    });
+  }
+  return t.$$set = (a) => {
+    "value" in a && i(0, s = a.value), "type" in a && i(1, d = a.type), "selected" in a && i(2, l = a.selected);
+  }, [s, d, l, n, r, u, f];
+}
+class W extends h {
+  constructor(e) {
+    super(), E(this, e, V, M, q, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  W as default
+};

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

@@ -0,0 +1 @@
+.gallery.svelte-84cxb8{padding:var(--size-1) var(--size-2)}div.svelte-84cxb8{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}

src/demo/app.py

@@ -0,0 +1,32 @@
+import gradio as gr
+from gradio_iframecomponent import IFrame
+
+def create_demo():
+    with gr.Blocks() as demo:
+        gr.Markdown("# IFrame Component Demo")
+        
+        iframe = IFrame(
+            label="Web Page Viewer",
+            value="https://www.gradio.app",
+            interactive=True,
+            height=500
+        )
+        
+        url_input = gr.Textbox(
+            label="Enter URL",
+            placeholder="https://example.com"
+        )
+        
+        load_btn = gr.Button("Load URL")
+        
+        load_btn.click(
+            fn=lambda url: url,
+            inputs=url_input,
+            outputs=iframe
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    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_iframecomponent

src/demo/space.py

@@ -0,0 +1,153 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'IFrame': {'description': 'A custom Gradio component for embedding iframes.', 'members': {'__init__': {'value': {'type': 'str', 'default': '""', 'description': None}, 'src': {'type': 'str | None', 'default': 'None', 'description': None}, 'width': {'type': 'str | int', 'default': '"100%"', 'description': None}, 'height': {'type': 'str | int', 'default': '400', 'description': None}, 'sandbox': {'type': 'str | None', 'default': 'None', 'description': None}, 'interactive': {'type': 'bool', 'default': 'True', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'True', 'description': None}}, 'postprocess': {'value': {'type': 'str | None', 'description': None}}, 'preprocess': {'return': {'type': 'str | None', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the IFrame 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.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the IFrame.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'IFrame': []}}}
+
+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_iframecomponent`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+iframe
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_iframecomponent
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_iframecomponent import IFrame
+
+def create_demo():
+    with gr.Blocks() as demo:
+        gr.Markdown("# IFrame Component Demo")
+        
+        iframe = IFrame(
+            label="Web Page Viewer",
+            value="https://www.gradio.app",
+            interactive=True,
+            height=500
+        )
+        
+        url_input = gr.Textbox(
+            label="Enter URL",
+            placeholder="https://example.com"
+        )
+        
+        load_btn = gr.Button("Load URL")
+        
+        load_btn.click(
+            fn=lambda url: url,
+            inputs=url_input,
+            outputs=iframe
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `IFrame`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["IFrame"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["IFrame"]["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: str | None
+) -> str | None:
+    return value
+```
+""", elem_classes=["md-custom", "IFrame-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          IFrame: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let value: string | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+
+	let size: number;
+	let el: HTMLDivElement;
+
+	function set_styles(element: HTMLElement, el_width: number): void {
+		element.style.setProperty(
+			"--local-text-width",
+			`${el_width && el_width < 150 ? el_width : 200}px`
+		);
+		element.style.whiteSpace = "unset";
+	}
+
+	onMount(() => {
+		set_styles(el, size);
+	});
+</script>
+
+<div
+	bind:clientWidth={size}
+	bind:this={el}
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value ? value : ""}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+
+	div {
+		overflow: hidden;
+		min-width: var(--local-text-width);
+
+		white-space: nowrap;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import { Block } from "@gradio/atoms";
+    import { StatusTracker } from "@gradio/statustracker";
+    import type { Gradio, SelectData } from "@gradio/utils";
+
+    export let gradio: Gradio<{
+        change: string;
+        input: string;
+        select: SelectData;
+    }>;
+    
+    export let elem_id = "";
+    export let elem_classes: string[] = [];
+    export let visible = true;
+    export let value = "";
+    export let loading_status: any;
+    export let label: string;
+    export let show_label: boolean;
+    export let interactive: boolean;
+    export let root: string;
+
+    let iframe_container: HTMLDivElement;
+    
+    // Handle iframe load events for dynamic sizing
+    function handleIframeLoad(event: Event) {
+        const iframe = event.target as HTMLIFrameElement;
+        try {
+            // Attempt to adjust height based on content (same-origin only)
+            if (iframe.contentDocument) {
+                const contentHeight = iframe.contentDocument.body.scrollHeight;
+                iframe.style.height = contentHeight + "px";
+            }
+        } catch (e) {
+            // Cross-origin iframes will throw security errors - this is expected
+            console.log("Cannot access iframe content (cross-origin)");
+        }
+    }
+
+    // Update value when content changes
+    function updateValue(newValue: string) {
+        value = newValue;
+        gradio.dispatch("change", value);
+        gradio.dispatch("input", value);
+    }
+
+    $: if (iframe_container && value) {
+        iframe_container.innerHTML = value;
+        
+        // Add load event listeners to all iframes
+        const iframes = iframe_container.querySelectorAll('iframe');
+        iframes.forEach(iframe => {
+            iframe.addEventListener('load', handleIframeLoad);
+        });
+    }
+</script>
+
+<Block {visible} {elem_id} {elem_classes} allow_overflow={false} padding={false}>
+    {#if loading_status}
+        <StatusTracker autoscroll={gradio.autoscroll} i18n={gradio.i18n} {...loading_status} />
+    {/if}
+    
+    {#if show_label}
+        <label for="iframe-{elem_id}" class="block text-sm font-medium text-gray-700 mb-2">
+            {label}
+        </label>
+    {/if}
+    
+    <div 
+        bind:this={iframe_container}
+        class="iframe-container w-full"
+        style="min-height: 300px; border-radius: 8px; overflow: hidden;"
+    />
+    
+    {#if interactive}
+        <div class="mt-2">
+            <input
+                type="url"
+                placeholder="Enter URL or HTML content"
+                class="w-full px-3 py-2 border border-gray-300 rounded-md"
+                on:input={(e) => updateValue(e.target.value)}
+                value={value}
+            />
+        </div>
+    {/if}
+</Block>
+
+<style>
+    .iframe-container :global(iframe) {
+        width: 100%;
+        border: none;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    .iframe-container :global(iframe):focus {
+        outline: 2px solid #3b82f6;
+        outline-offset: 2px;
+    }
+</style>

src/frontend/gradio.config.js

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

src/frontend/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "gradio_iframecomponent",
+  "version": "0.3.22",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "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"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.16.1",
+    "@gradio/icons": "0.12.0",
+    "@gradio/statustracker": "0.10.12",
+    "@gradio/utils": "0.10.2"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.13.1"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/simpletextbox"
+  }
+}

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_iframecomponent"
+version = "0.0.1"
+description = "iframe"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = ["gradio-custom-component", "gradio-template-SimpleTextbox"]
+# 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_iframecomponent/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_iframecomponent"]