Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,13 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+node_modules
+test.log
+.DS_Store
+backend/gradio_log/templates
+demo/space.py

README.md

@@ -1,17 +1,829 @@
 
----
-tags: [gradio-custom-component,gradio-template-SimpleTextbox,log,gradio_log,gradio_log_component,gradio_print_log]
-title: gradio_log V0.0.4
-colorFrom: blue
-colorTo: yellow
-sdk: docker
-pinned: false
-license: apache-2.0
----
+# `gradio_log`
+<a href="https://pypi.org/project/gradio_log/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_log"></a>  
 
+A Log component for Gradio which can easily show some log file in the interface.
 
-# Name: gradio_log
+## Installation
 
-Description: A Log component for Gradio which can easily show some log file in the interface.
+```bash
+pip install gradio_log
+```
 
-Install with: pip install gradio_log
+## Usage
+
+```python
+import logging
+from pathlib import Path
+
+import gradio as gr
+from gradio_log import Log
+
+
+class CustomFormatter(logging.Formatter):
+
+    green = "\x1b[32;20m"
+    blue = "\x1b[34;20m"
+    yellow = "\x1b[33;20m"
+    red = "\x1b[31;20m"
+    bold_red = "\x1b[31;1m"
+    reset = "\x1b[0m"
+    format = "%(asctime)s - %(levelname)s - %(message)s (%(filename)s:%(lineno)d)"
+
+    FORMATS = {
+        logging.DEBUG: blue + format + reset,
+        logging.INFO: green + format + reset,
+        logging.WARNING: yellow + format + reset,
+        logging.ERROR: red + format + reset,
+        logging.CRITICAL: bold_red + format + reset,
+    }
+
+    def format(self, record):
+        log_fmt = self.FORMATS.get(record.levelno)
+        formatter = logging.Formatter(log_fmt)
+        return formatter.format(record)
+
+
+formatter = CustomFormatter()
+
+log_file = "/tmp/gradio_log.txt"
+Path(log_file).touch()
+
+ch = logging.FileHandler(log_file)
+ch.setLevel(logging.DEBUG)
+ch.setFormatter(formatter)
+
+logger = logging.getLogger("gradio_log")
+logger.setLevel(logging.DEBUG)
+for handler in logger.handlers:
+    logger.removeHandler(handler)
+logger.addHandler(ch)
+
+
+logger.info("The logs will be displayed in here.")
+
+
+def create_log_handler(level):
+    def l(text):
+        getattr(logger, level)(text)
+
+    return l
+
+
+with gr.Blocks() as demo:
+    text = gr.Textbox(label="Enter text to write to log file")
+    with gr.Row():
+        for l in ["debug", "info", "warning", "error", "critical"]:
+            button = gr.Button(f"log as {l}")
+            button.click(fn=create_log_handler(l), inputs=text)
+    Log(log_file, dark=True)
+
+
+if __name__ == "__main__":
+    demo.launch(ssr_mode=True)
+
+```
+
+## `Log`
+
+### 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>log_file</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the log file path to read from.</td>
+</tr>
+
+<tr>
+<td align="left"><code>tail</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>100</code></td>
+<td align="left">from the end of the file, the number of lines to start read from.</td>
+</tr>
+
+<tr>
+<td align="left"><code>dark</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">if True, will render the component in dark mode.</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_allow_proposed_api</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_allow_transparency</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_alt_click_moves_cursor</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_convert_eol</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_cursor_blink</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_cursor_inactive_style</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"outline" | "block" | "bar" | "underline" | "none"
+```
+
+</td>
+<td align="left"><code>"outline"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_cursor_style</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"block" | "underline" | "bar"
+```
+
+</td>
+<td align="left"><code>"block"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_cursor_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>1</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_custom_glyphs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_disable_stdin</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_document_override</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[typing.Any][typing.Any, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_draw_bold_text_in_bright_colors</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_fast_scroll_modifier</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[
+    typing.Literal["none", "alt", "ctrl", "shift"]
+]["none" | "alt" | "ctrl" | "shift", None]
+```
+
+</td>
+<td align="left"><code>"alt"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_fast_scroll_sensitivity</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>1</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_font_family</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[str][str, None]
+```
+
+</td>
+<td align="left"><code>"courier-new, courier, monospace"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_font_size</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>15</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_font_weight</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[
+    typing.Literal[
+        "normal",
+        "bold",
+        "100",
+        "200",
+        "300",
+        "400",
+        "500",
+        "600",
+        "700",
+        "800",
+        "900",
+    ]
+][
+    "normal"
+    | "bold"
+    | "100"
+    | "200"
+    | "300"
+    | "400"
+    | "500"
+    | "600"
+    | "700"
+    | "800"
+    | "900",
+    None,
+]
+```
+
+</td>
+<td align="left"><code>"normal"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_font_weight_bold</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[
+    typing.Literal[
+        "normal",
+        "bold",
+        "100",
+        "200",
+        "300",
+        "400",
+        "500",
+        "600",
+        "700",
+        "800",
+        "900",
+    ]
+][
+    "normal"
+    | "bold"
+    | "100"
+    | "200"
+    | "300"
+    | "400"
+    | "500"
+    | "600"
+    | "700"
+    | "800"
+    | "900",
+    None,
+]
+```
+
+</td>
+<td align="left"><code>"bold"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_ignore_bracketed_paste_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_letter_spacing</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[float][float, None]
+```
+
+</td>
+<td align="left"><code>0</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_line_height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[float][float, None]
+```
+
+</td>
+<td align="left"><code>1.0</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_log_level</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[
+    typing.Literal[
+        "trace", "debug", "info", "warn", "error", "off"
+    ]
+][
+    "trace" | "debug" | "info" | "warn" | "error" | "off",
+    None,
+]
+```
+
+</td>
+<td align="left"><code>"info"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_mac_option_click_forces_selection</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_mac_option_is_meta</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_minimum_contrast_ratio</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>1</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_overview_ruler_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>0</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_rescale_overlapping_glyphs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_screen_reader_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_scroll_on_user_input</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_scroll_sensitivity</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>1</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_scrollback</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>1000</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_smooth_scroll_duration</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>0</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_tab_stop_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>8</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>xterm_windows_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>False</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">The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>info</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">additional component description.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float
+```
+
+</td>
+<td align="left"><code>0.3</code></td>
+<td align="left">New log pulling interval.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `load` | This listener is triggered when the Log initially loads in the browser. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, the preprocessed input data sent to the user's function in the backend.
+
+
+ ```python
+ def predict(
+     value: typing.Any
+ ) -> Unknown:
+     return value
+ ```
+ 

app.py

@@ -65,4 +65,4 @@ with gr.Blocks() as demo:
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=True)

space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'Log': {'description': 'Create a log component which can continuously read from a log file and display the content in a container.', 'members': {'__init__': {'log_file': {'type': 'str', 'default': 'None', 'description': 'the log file path to read from.'}, 'tail': {'type': 'int', 'default': '100', 'description': 'from the end of the file, the number of lines to start read from.'}, 'dark': {'type': 'bool', 'default': 'False', 'description': 'if True, will render the component in dark mode.'}, 'xterm_allow_proposed_api': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_allow_transparency': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_alt_click_moves_cursor': {'type': 'bool | None', 'default': 'True', 'description': None}, 'xterm_convert_eol': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_cursor_blink': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_cursor_inactive_style': {'type': '"outline" | "block" | "bar" | "underline" | "none"', 'default': '"outline"', 'description': None}, 'xterm_cursor_style': {'type': '"block" | "underline" | "bar"', 'default': '"block"', 'description': None}, 'xterm_cursor_width': {'type': 'int | None', 'default': '1', 'description': None}, 'xterm_custom_glyphs': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_disable_stdin': {'type': 'bool | None', 'default': 'True', 'description': None}, 'xterm_document_override': {'type': 'Any | None', 'default': 'None', 'description': None}, 'xterm_draw_bold_text_in_bright_colors': {'type': 'bool | None', 'default': 'True', 'description': None}, 'xterm_fast_scroll_modifier': {'type': '"none" | "alt" | "ctrl" | "shift" | None', 'default': '"alt"', 'description': None}, 'xterm_fast_scroll_sensitivity': {'type': 'int | None', 'default': '1', 'description': None}, 'xterm_font_family': {'type': 'str | None', 'default': '"courier-new, courier, monospace"', 'description': None}, 'xterm_font_size': {'type': 'int | None', 'default': '15', 'description': None}, 'xterm_font_weight': {'type': '"normal"\n    | "bold"\n    | "100"\n    | "200"\n    | "300"\n    | "400"\n    | "500"\n    | "600"\n    | "700"\n    | "800"\n    | "900"\n    | None', 'default': '"normal"', 'description': None}, 'xterm_font_weight_bold': {'type': '"normal"\n    | "bold"\n    | "100"\n    | "200"\n    | "300"\n    | "400"\n    | "500"\n    | "600"\n    | "700"\n    | "800"\n    | "900"\n    | None', 'default': '"bold"', 'description': None}, 'xterm_ignore_bracketed_paste_mode': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_letter_spacing': {'type': 'float | None', 'default': '0', 'description': None}, 'xterm_line_height': {'type': 'float | None', 'default': '1.0', 'description': None}, 'xterm_log_level': {'type': '"trace" | "debug" | "info" | "warn" | "error" | "off" | None', 'default': '"info"', 'description': None}, 'xterm_mac_option_click_forces_selection': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_mac_option_is_meta': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_minimum_contrast_ratio': {'type': 'int | None', 'default': '1', 'description': None}, 'xterm_overview_ruler_width': {'type': 'int | None', 'default': '0', 'description': None}, 'xterm_rescale_overlapping_glyphs': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_screen_reader_mode': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_scroll_on_user_input': {'type': 'bool | None', 'default': 'True', 'description': None}, 'xterm_scroll_sensitivity': {'type': 'int | None', 'default': '1', 'description': None}, 'xterm_scrollback': {'type': 'int | None', 'default': '1000', 'description': None}, 'xterm_smooth_scroll_duration': {'type': 'int | None', 'default': '0', 'description': None}, 'xterm_tab_stop_width': {'type': 'int | None', 'default': '8', 'description': None}, 'xterm_windows_mode': {'type': 'bool | None', 'default': 'False', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': 'additional component description.'}, 'every': {'type': 'float', 'default': '0.3', 'description': 'New log pulling interval.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}, 'preprocess': {'return': {'type': 'Any', 'description': "The preprocessed input data sent to the user's function in the backend."}, 'value': None}}, 'events': {'load': {'type': None, 'default': None, 'description': 'This listener is triggered when the Log initially loads in the browser.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'Log': []}}}
+_docs = {'Log': {'description': 'Create a log component which can continuously read from a log file and display the content in a container.', 'members': {'__init__': {'log_file': {'type': 'str', 'default': 'None', 'description': 'the log file path to read from.'}, 'tail': {'type': 'int', 'default': '100', 'description': 'from the end of the file, the number of lines to start read from.'}, 'dark': {'type': 'bool', 'default': 'False', 'description': 'if True, will render the component in dark mode.'}, 'xterm_allow_proposed_api': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_allow_transparency': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_alt_click_moves_cursor': {'type': 'typing.Optional[bool][bool, None]', 'default': 'True', 'description': None}, 'xterm_convert_eol': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_cursor_blink': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_cursor_inactive_style': {'type': '"outline" | "block" | "bar" | "underline" | "none"', 'default': '"outline"', 'description': None}, 'xterm_cursor_style': {'type': '"block" | "underline" | "bar"', 'default': '"block"', 'description': None}, 'xterm_cursor_width': {'type': 'typing.Optional[int][int, None]', 'default': '1', 'description': None}, 'xterm_custom_glyphs': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_disable_stdin': {'type': 'typing.Optional[bool][bool, None]', 'default': 'True', 'description': None}, 'xterm_document_override': {'type': 'typing.Optional[typing.Any][typing.Any, None]', 'default': 'None', 'description': None}, 'xterm_draw_bold_text_in_bright_colors': {'type': 'typing.Optional[bool][bool, None]', 'default': 'True', 'description': None}, 'xterm_fast_scroll_modifier': {'type': 'typing.Optional[\n    typing.Literal["none", "alt", "ctrl", "shift"]\n]["none" | "alt" | "ctrl" | "shift", None]', 'default': '"alt"', 'description': None}, 'xterm_fast_scroll_sensitivity': {'type': 'typing.Optional[int][int, None]', 'default': '1', 'description': None}, 'xterm_font_family': {'type': 'typing.Optional[str][str, None]', 'default': '"courier-new, courier, monospace"', 'description': None}, 'xterm_font_size': {'type': 'typing.Optional[int][int, None]', 'default': '15', 'description': None}, 'xterm_font_weight': {'type': 'typing.Optional[\n    typing.Literal[\n        "normal",\n        "bold",\n        "100",\n        "200",\n        "300",\n        "400",\n        "500",\n        "600",\n        "700",\n        "800",\n        "900",\n    ]\n][\n    "normal"\n    | "bold"\n    | "100"\n    | "200"\n    | "300"\n    | "400"\n    | "500"\n    | "600"\n    | "700"\n    | "800"\n    | "900",\n    None,\n]', 'default': '"normal"', 'description': None}, 'xterm_font_weight_bold': {'type': 'typing.Optional[\n    typing.Literal[\n        "normal",\n        "bold",\n        "100",\n        "200",\n        "300",\n        "400",\n        "500",\n        "600",\n        "700",\n        "800",\n        "900",\n    ]\n][\n    "normal"\n    | "bold"\n    | "100"\n    | "200"\n    | "300"\n    | "400"\n    | "500"\n    | "600"\n    | "700"\n    | "800"\n    | "900",\n    None,\n]', 'default': '"bold"', 'description': None}, 'xterm_ignore_bracketed_paste_mode': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_letter_spacing': {'type': 'typing.Optional[float][float, None]', 'default': '0', 'description': None}, 'xterm_line_height': {'type': 'typing.Optional[float][float, None]', 'default': '1.0', 'description': None}, 'xterm_log_level': {'type': 'typing.Optional[\n    typing.Literal[\n        "trace", "debug", "info", "warn", "error", "off"\n    ]\n][\n    "trace" | "debug" | "info" | "warn" | "error" | "off",\n    None,\n]', 'default': '"info"', 'description': None}, 'xterm_mac_option_click_forces_selection': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_mac_option_is_meta': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_minimum_contrast_ratio': {'type': 'typing.Optional[int][int, None]', 'default': '1', 'description': None}, 'xterm_overview_ruler_width': {'type': 'typing.Optional[int][int, None]', 'default': '0', 'description': None}, 'xterm_rescale_overlapping_glyphs': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_screen_reader_mode': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_scroll_on_user_input': {'type': 'typing.Optional[bool][bool, None]', 'default': 'True', 'description': None}, 'xterm_scroll_sensitivity': {'type': 'typing.Optional[int][int, None]', 'default': '1', 'description': None}, 'xterm_scrollback': {'type': 'typing.Optional[int][int, None]', 'default': '1000', 'description': None}, 'xterm_smooth_scroll_duration': {'type': 'typing.Optional[int][int, None]', 'default': '0', 'description': None}, 'xterm_tab_stop_width': {'type': 'typing.Optional[int][int, None]', 'default': '8', 'description': None}, 'xterm_windows_mode': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': 'additional component description.'}, 'every': {'type': 'float', 'default': '0.3', 'description': 'New log pulling interval.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}, 'preprocess': {'return': {'type': 'typing.Any', 'description': "The preprocessed input data sent to the user's function in the backend."}, 'value': None}}, 'events': {'load': {'type': None, 'default': None, 'description': 'This listener is triggered when the Log initially loads in the browser.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'Log': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -105,7 +105,7 @@ with gr.Blocks() as demo:
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=True)
 
 ```
 """, elem_classes=["md-custom"], header_links=True)
@@ -142,7 +142,7 @@ The code snippet below is accurate in cases where the component is used as both
 
  ```python
 def predict(
-    value: Any
+    value: typing.Any
 ) -> Unknown:
     return value
 ```

src/.gitignore

@@ -8,4 +8,6 @@ __tmp/*
 *.pyi
 node_modules
 test.log
-.DS_Store
+.DS_Store
+backend/gradio_log/templates
+demo/space.py

src/README.md

@@ -80,7 +80,7 @@ with gr.Blocks() as demo:
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=True)
 
 ```
 
@@ -142,7 +142,7 @@ bool
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -155,7 +155,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -168,7 +168,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -181,7 +181,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -194,7 +194,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -233,7 +233,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -246,7 +246,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -259,7 +259,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -272,7 +272,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-Any | None
+typing.Optional[typing.Any][typing.Any, None]
 ```
 
 </td>
@@ -285,7 +285,7 @@ Any | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -298,7 +298,9 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-"none" | "alt" | "ctrl" | "shift" | None
+typing.Optional[
+    typing.Literal["none", "alt", "ctrl", "shift"]
+]["none" | "alt" | "ctrl" | "shift", None]
 ```
 
 </td>
@@ -311,7 +313,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -324,7 +326,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-str | None
+typing.Optional[str][str, None]
 ```
 
 </td>
@@ -337,7 +339,7 @@ str | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -350,7 +352,22 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-"normal"
+typing.Optional[
+    typing.Literal[
+        "normal",
+        "bold",
+        "100",
+        "200",
+        "300",
+        "400",
+        "500",
+        "600",
+        "700",
+        "800",
+        "900",
+    ]
+][
+    "normal"
     | "bold"
     | "100"
     | "200"
@@ -360,8 +377,9 @@ int | None
     | "600"
     | "700"
     | "800"
-    | "900"
-    | None
+    | "900",
+    None,
+]
 ```
 
 </td>
@@ -374,7 +392,22 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-"normal"
+typing.Optional[
+    typing.Literal[
+        "normal",
+        "bold",
+        "100",
+        "200",
+        "300",
+        "400",
+        "500",
+        "600",
+        "700",
+        "800",
+        "900",
+    ]
+][
+    "normal"
     | "bold"
     | "100"
     | "200"
@@ -384,8 +417,9 @@ int | None
     | "600"
     | "700"
     | "800"
-    | "900"
-    | None
+    | "900",
+    None,
+]
 ```
 
 </td>
@@ -398,7 +432,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -411,7 +445,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-float | None
+typing.Optional[float][float, None]
 ```
 
 </td>
@@ -424,7 +458,7 @@ float | None
 <td align="left" style="width: 25%;">
 
 ```python
-float | None
+typing.Optional[float][float, None]
 ```
 
 </td>
@@ -437,7 +471,14 @@ float | None
 <td align="left" style="width: 25%;">
 
 ```python
-"trace" | "debug" | "info" | "warn" | "error" | "off" | None
+typing.Optional[
+    typing.Literal[
+        "trace", "debug", "info", "warn", "error", "off"
+    ]
+][
+    "trace" | "debug" | "info" | "warn" | "error" | "off",
+    None,
+]
 ```
 
 </td>
@@ -450,7 +491,7 @@ float | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -463,7 +504,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -476,7 +517,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -489,7 +530,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -502,7 +543,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -515,7 +556,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -528,7 +569,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -541,7 +582,7 @@ bool | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -554,7 +595,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -567,7 +608,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -580,7 +621,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-int | None
+typing.Optional[int][int, None]
 ```
 
 </td>
@@ -593,7 +634,7 @@ int | None
 <td align="left" style="width: 25%;">
 
 ```python
-bool | None
+typing.Optional[bool][bool, None]
 ```
 
 </td>
@@ -781,7 +822,7 @@ The code snippet below is accurate in cases where the component is used as both
 
  ```python
  def predict(
-     value: Any
+     value: typing.Any
  ) -> Unknown:
      return value
  ```

src/demo/app.py

@@ -65,4 +65,4 @@ with gr.Blocks() as demo:
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=True)

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'Log': {'description': 'Create a log component which can continuously read from a log file and display the content in a container.', 'members': {'__init__': {'log_file': {'type': 'str', 'default': 'None', 'description': 'the log file path to read from.'}, 'tail': {'type': 'int', 'default': '100', 'description': 'from the end of the file, the number of lines to start read from.'}, 'dark': {'type': 'bool', 'default': 'False', 'description': 'if True, will render the component in dark mode.'}, 'xterm_allow_proposed_api': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_allow_transparency': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_alt_click_moves_cursor': {'type': 'bool | None', 'default': 'True', 'description': None}, 'xterm_convert_eol': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_cursor_blink': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_cursor_inactive_style': {'type': '"outline" | "block" | "bar" | "underline" | "none"', 'default': '"outline"', 'description': None}, 'xterm_cursor_style': {'type': '"block" | "underline" | "bar"', 'default': '"block"', 'description': None}, 'xterm_cursor_width': {'type': 'int | None', 'default': '1', 'description': None}, 'xterm_custom_glyphs': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_disable_stdin': {'type': 'bool | None', 'default': 'True', 'description': None}, 'xterm_document_override': {'type': 'Any | None', 'default': 'None', 'description': None}, 'xterm_draw_bold_text_in_bright_colors': {'type': 'bool | None', 'default': 'True', 'description': None}, 'xterm_fast_scroll_modifier': {'type': '"none" | "alt" | "ctrl" | "shift" | None', 'default': '"alt"', 'description': None}, 'xterm_fast_scroll_sensitivity': {'type': 'int | None', 'default': '1', 'description': None}, 'xterm_font_family': {'type': 'str | None', 'default': '"courier-new, courier, monospace"', 'description': None}, 'xterm_font_size': {'type': 'int | None', 'default': '15', 'description': None}, 'xterm_font_weight': {'type': '"normal"\n    | "bold"\n    | "100"\n    | "200"\n    | "300"\n    | "400"\n    | "500"\n    | "600"\n    | "700"\n    | "800"\n    | "900"\n    | None', 'default': '"normal"', 'description': None}, 'xterm_font_weight_bold': {'type': '"normal"\n    | "bold"\n    | "100"\n    | "200"\n    | "300"\n    | "400"\n    | "500"\n    | "600"\n    | "700"\n    | "800"\n    | "900"\n    | None', 'default': '"bold"', 'description': None}, 'xterm_ignore_bracketed_paste_mode': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_letter_spacing': {'type': 'float | None', 'default': '0', 'description': None}, 'xterm_line_height': {'type': 'float | None', 'default': '1.0', 'description': None}, 'xterm_log_level': {'type': '"trace" | "debug" | "info" | "warn" | "error" | "off" | None', 'default': '"info"', 'description': None}, 'xterm_mac_option_click_forces_selection': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_mac_option_is_meta': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_minimum_contrast_ratio': {'type': 'int | None', 'default': '1', 'description': None}, 'xterm_overview_ruler_width': {'type': 'int | None', 'default': '0', 'description': None}, 'xterm_rescale_overlapping_glyphs': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_screen_reader_mode': {'type': 'bool | None', 'default': 'False', 'description': None}, 'xterm_scroll_on_user_input': {'type': 'bool | None', 'default': 'True', 'description': None}, 'xterm_scroll_sensitivity': {'type': 'int | None', 'default': '1', 'description': None}, 'xterm_scrollback': {'type': 'int | None', 'default': '1000', 'description': None}, 'xterm_smooth_scroll_duration': {'type': 'int | None', 'default': '0', 'description': None}, 'xterm_tab_stop_width': {'type': 'int | None', 'default': '8', 'description': None}, 'xterm_windows_mode': {'type': 'bool | None', 'default': 'False', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': 'additional component description.'}, 'every': {'type': 'float', 'default': '0.3', 'description': 'New log pulling interval.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}, 'preprocess': {'return': {'type': 'Any', 'description': "The preprocessed input data sent to the user's function in the backend."}, 'value': None}}, 'events': {'load': {'type': None, 'default': None, 'description': 'This listener is triggered when the Log initially loads in the browser.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'Log': []}}}
+_docs = {'Log': {'description': 'Create a log component which can continuously read from a log file and display the content in a container.', 'members': {'__init__': {'log_file': {'type': 'str', 'default': 'None', 'description': 'the log file path to read from.'}, 'tail': {'type': 'int', 'default': '100', 'description': 'from the end of the file, the number of lines to start read from.'}, 'dark': {'type': 'bool', 'default': 'False', 'description': 'if True, will render the component in dark mode.'}, 'xterm_allow_proposed_api': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_allow_transparency': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_alt_click_moves_cursor': {'type': 'typing.Optional[bool][bool, None]', 'default': 'True', 'description': None}, 'xterm_convert_eol': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_cursor_blink': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_cursor_inactive_style': {'type': '"outline" | "block" | "bar" | "underline" | "none"', 'default': '"outline"', 'description': None}, 'xterm_cursor_style': {'type': '"block" | "underline" | "bar"', 'default': '"block"', 'description': None}, 'xterm_cursor_width': {'type': 'typing.Optional[int][int, None]', 'default': '1', 'description': None}, 'xterm_custom_glyphs': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_disable_stdin': {'type': 'typing.Optional[bool][bool, None]', 'default': 'True', 'description': None}, 'xterm_document_override': {'type': 'typing.Optional[typing.Any][typing.Any, None]', 'default': 'None', 'description': None}, 'xterm_draw_bold_text_in_bright_colors': {'type': 'typing.Optional[bool][bool, None]', 'default': 'True', 'description': None}, 'xterm_fast_scroll_modifier': {'type': 'typing.Optional[\n    typing.Literal["none", "alt", "ctrl", "shift"]\n]["none" | "alt" | "ctrl" | "shift", None]', 'default': '"alt"', 'description': None}, 'xterm_fast_scroll_sensitivity': {'type': 'typing.Optional[int][int, None]', 'default': '1', 'description': None}, 'xterm_font_family': {'type': 'typing.Optional[str][str, None]', 'default': '"courier-new, courier, monospace"', 'description': None}, 'xterm_font_size': {'type': 'typing.Optional[int][int, None]', 'default': '15', 'description': None}, 'xterm_font_weight': {'type': 'typing.Optional[\n    typing.Literal[\n        "normal",\n        "bold",\n        "100",\n        "200",\n        "300",\n        "400",\n        "500",\n        "600",\n        "700",\n        "800",\n        "900",\n    ]\n][\n    "normal"\n    | "bold"\n    | "100"\n    | "200"\n    | "300"\n    | "400"\n    | "500"\n    | "600"\n    | "700"\n    | "800"\n    | "900",\n    None,\n]', 'default': '"normal"', 'description': None}, 'xterm_font_weight_bold': {'type': 'typing.Optional[\n    typing.Literal[\n        "normal",\n        "bold",\n        "100",\n        "200",\n        "300",\n        "400",\n        "500",\n        "600",\n        "700",\n        "800",\n        "900",\n    ]\n][\n    "normal"\n    | "bold"\n    | "100"\n    | "200"\n    | "300"\n    | "400"\n    | "500"\n    | "600"\n    | "700"\n    | "800"\n    | "900",\n    None,\n]', 'default': '"bold"', 'description': None}, 'xterm_ignore_bracketed_paste_mode': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_letter_spacing': {'type': 'typing.Optional[float][float, None]', 'default': '0', 'description': None}, 'xterm_line_height': {'type': 'typing.Optional[float][float, None]', 'default': '1.0', 'description': None}, 'xterm_log_level': {'type': 'typing.Optional[\n    typing.Literal[\n        "trace", "debug", "info", "warn", "error", "off"\n    ]\n][\n    "trace" | "debug" | "info" | "warn" | "error" | "off",\n    None,\n]', 'default': '"info"', 'description': None}, 'xterm_mac_option_click_forces_selection': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_mac_option_is_meta': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_minimum_contrast_ratio': {'type': 'typing.Optional[int][int, None]', 'default': '1', 'description': None}, 'xterm_overview_ruler_width': {'type': 'typing.Optional[int][int, None]', 'default': '0', 'description': None}, 'xterm_rescale_overlapping_glyphs': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_screen_reader_mode': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'xterm_scroll_on_user_input': {'type': 'typing.Optional[bool][bool, None]', 'default': 'True', 'description': None}, 'xterm_scroll_sensitivity': {'type': 'typing.Optional[int][int, None]', 'default': '1', 'description': None}, 'xterm_scrollback': {'type': 'typing.Optional[int][int, None]', 'default': '1000', 'description': None}, 'xterm_smooth_scroll_duration': {'type': 'typing.Optional[int][int, None]', 'default': '0', 'description': None}, 'xterm_tab_stop_width': {'type': 'typing.Optional[int][int, None]', 'default': '8', 'description': None}, 'xterm_windows_mode': {'type': 'typing.Optional[bool][bool, None]', 'default': 'False', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': 'additional component description.'}, 'every': {'type': 'float', 'default': '0.3', 'description': 'New log pulling interval.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, will place the component in a container - providing some extra padding around the border.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}, 'preprocess': {'return': {'type': 'typing.Any', 'description': "The preprocessed input data sent to the user's function in the backend."}, 'value': None}}, 'events': {'load': {'type': None, 'default': None, 'description': 'This listener is triggered when the Log initially loads in the browser.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'Log': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -105,7 +105,7 @@ with gr.Blocks() as demo:
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=True)
 
 ```
 """, elem_classes=["md-custom"], header_links=True)
@@ -142,7 +142,7 @@ The code snippet below is accurate in cases where the component is used as both
 
  ```python
 def predict(
-    value: Any
+    value: typing.Any
 ) -> Unknown:
     return value
 ```

src/frontend/Index.svelte

@@ -6,8 +6,8 @@
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import xterm from "@xterm/xterm";
-	import addon from "xterm-addon-fit";
+	import { Terminal } from "@xterm/xterm";
+	import { FitAddon } from "xterm-addon-fit";
 	import { onMount } from "svelte";
 
 	export let gradio: Gradio<{
@@ -74,7 +74,7 @@
 			};
 
 	onMount(() => {
-		term = new xterm.Terminal({
+		term = new Terminal({
 			theme,
 			allowProposedApi: xterm_allow_proposed_api,
 			allowTransparency: xterm_allow_transparency,
@@ -113,7 +113,7 @@
 			windowsMode: xterm_windows_mode,
 		});
 		term.open(termNode);
-		const fitAddon = new addon.FitAddon();
+		const fitAddon = new FitAddon();
 		term.loadAddon(fitAddon);
 		setTimeout(() => {
 			fitAddon.fit();

src/frontend/package.json

@@ -8,15 +8,21 @@
   "private": false,
   "main_changeset": true,
   "exports": {
-    ".": "./Index.svelte",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte"
+    }
   },
   "dependencies": {
-    "@gradio/atoms": "0.6.1",
-    "@gradio/icons": "0.3.4",
-    "@gradio/statustracker": "0.4.10",
-    "@gradio/utils": "0.3.0",
+    "@gradio/atoms": "0.11.0",
+    "@gradio/icons": "0.8.1",
+    "@gradio/statustracker": "0.9.4",
+    "@gradio/utils": "0.7.0",
     "@xterm/xterm": "^5.5.0",
     "xterm-addon-fit": "^0.8.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "^0.13.0",
+    "@tsconfig/svelte": "^5.0.4"
   }
 }

src/frontend/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+}

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_log"
-version = "0.0.4"
+version = "0.0.5"
 description = "A Log component for Gradio which can easily show some log file in the interface."
 readme = "README.md"
 license = "Apache-2.0"
@@ -23,7 +23,7 @@ keywords = [
   "gradio_print_log",
 ]
 # Add dependencies here
-dependencies = ["gradio>=4.0,<5.0"]
+dependencies = ["gradio>=4.0,<6.0"]
 classifiers = [
   'Development Status :: 3 - Alpha',
   'License :: OSI Approved :: Apache Software License',