Upload folder using huggingface_hub

README.md

@@ -1,9 +1,9 @@
 
 ---
 tags: [gradio-custom-component,gradio-template-SimpleTextbox,log,gradio_log,gradio_log_component,gradio_print_log]
-title: gradio_log V0.0.3
-colorFrom: green
-colorTo: red
+title: gradio_log V0.0.4
+colorFrom: blue
+colorTo: yellow
 sdk: docker
 pinned: false
 license: apache-2.0

app.py

@@ -1,11 +1,9 @@
-from pathlib import Path
 import logging
-import gradio as gr
+from pathlib import Path
 
+import gradio as gr
 from gradio_log import Log
 
-import logging
-
 
 class CustomFormatter(logging.Formatter):
 
@@ -51,7 +49,6 @@ logger.info("The logs will be displayed in here.")
 
 
 def create_log_handler(level):
-
     def l(text):
         getattr(logger, level)(text)
 
@@ -64,7 +61,7 @@ with gr.Blocks() as demo:
         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)
+    Log(log_file, dark=True)
 
 
 if __name__ == "__main__":

requirements.txt

@@ -1 +1 @@
-gradio_log==0.0.2
+gradio_log==0.0.3

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.'}, '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': []}}}
+_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': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -38,14 +38,12 @@ pip install gradio_log
 ## Usage
 
 ```python
-from pathlib import Path
 import logging
-import gradio as gr
+from pathlib import Path
 
+import gradio as gr
 from gradio_log import Log
 
-import logging
-
 
 class CustomFormatter(logging.Formatter):
 
@@ -91,7 +89,6 @@ logger.info("The logs will be displayed in here.")
 
 
 def create_log_handler(level):
-
     def l(text):
         getattr(logger, level)(text)
 
@@ -104,7 +101,7 @@ with gr.Blocks() as demo:
         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)
+    Log(log_file, dark=True)
 
 
 if __name__ == "__main__":
@@ -145,7 +142,7 @@ The code snippet below is accurate in cases where the component is used as both
 
  ```python
 def predict(
-    value: typing.Any
+    value: Any
 ) -> Unknown:
     return value
 ```

src/.gitignore

@@ -7,4 +7,5 @@ __pycache__/
 __tmp/*
 *.pyi
 node_modules
-test.log
+test.log
+.DS_Store

src/README.md

@@ -13,14 +13,12 @@ pip install gradio_log
 ## Usage
 
 ```python
-from pathlib import Path
 import logging
-import gradio as gr
+from pathlib import Path
 
+import gradio as gr
 from gradio_log import Log
 
-import logging
-
 
 class CustomFormatter(logging.Formatter):
 
@@ -66,7 +64,6 @@ logger.info("The logs will be displayed in here.")
 
 
 def create_log_handler(level):
-
     def l(text):
         getattr(logger, level)(text)
 
@@ -79,7 +76,7 @@ with gr.Blocks() as demo:
         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)
+    Log(log_file, dark=True)
 
 
 if __name__ == "__main__":
@@ -140,6 +137,470 @@ bool
 <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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+"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
+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
+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
+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
+"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
+"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
+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
+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
+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
+"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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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%;">
@@ -320,7 +781,7 @@ The code snippet below is accurate in cases where the component is used as both
 
  ```python
  def predict(
-     value: typing.Any
+     value: Any
  ) -> Unknown:
      return value
  ```

src/backend/gradio_log/log.py

@@ -3,12 +3,28 @@
 from __future__ import annotations
 
 import time
-from typing import Any
+from typing import Any, Literal, Optional
 
 from gradio.components.base import FormComponent
 from gradio.events import Events
 from gradio_client.documentation import document
 
+FontWeight = Literal[
+    "normal",
+    "bold",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900",
+]
+
+LogLevel = Literal["trace", "debug", "info", "warn", "error", "off"]
+
 
 @document()
 class Log(FormComponent):
@@ -53,6 +69,44 @@ class Log(FormComponent):
         log_file: str = None,
         tail: int = 100,
         dark: bool = False,
+        xterm_allow_proposed_api: Optional[bool] = False,
+        xterm_allow_transparency: Optional[bool] = False,
+        xterm_alt_click_moves_cursor: Optional[bool] = True,
+        xterm_convert_eol: Optional[bool] = False,
+        xterm_cursor_blink: Optional[bool] = False,
+        xterm_cursor_inactive_style: Literal[
+            "outline", "block", "bar", "underline", "none"
+        ] = "outline",
+        xterm_cursor_style: Literal["block", "underline", "bar"] = "block",
+        xterm_cursor_width: Optional[int] = 1,
+        xterm_custom_glyphs: Optional[bool] = False,
+        xterm_disable_stdin: Optional[bool] = True,
+        xterm_document_override: Optional[Any] = None,
+        xterm_draw_bold_text_in_bright_colors: Optional[bool] = True,
+        xterm_fast_scroll_modifier: Optional[
+            Literal["none", "alt", "ctrl", "shift"]
+        ] = "alt",
+        xterm_fast_scroll_sensitivity: Optional[int] = 1,
+        xterm_font_family: Optional[str] = "courier-new, courier, monospace",
+        xterm_font_size: Optional[int] = 15,
+        xterm_font_weight: Optional[FontWeight] = "normal",
+        xterm_font_weight_bold: Optional[FontWeight] = "bold",
+        xterm_ignore_bracketed_paste_mode: Optional[bool] = False,
+        xterm_letter_spacing: Optional[float] = 0,
+        xterm_line_height: Optional[float] = 1.0,
+        xterm_log_level: Optional[LogLevel] = "info",
+        xterm_mac_option_click_forces_selection: Optional[bool] = False,
+        xterm_mac_option_is_meta: Optional[bool] = False,
+        xterm_minimum_contrast_ratio: Optional[int] = 1,
+        xterm_overview_ruler_width: Optional[int] = 0,
+        xterm_rescale_overlapping_glyphs: Optional[bool] = False,
+        xterm_screen_reader_mode: Optional[bool] = False,
+        xterm_scroll_on_user_input: Optional[bool] = True,
+        xterm_scroll_sensitivity: Optional[int] = 1,
+        xterm_scrollback: Optional[int] = 1000,
+        xterm_smooth_scroll_duration: Optional[int] = 0,
+        xterm_tab_stop_width: Optional[int] = 8,
+        xterm_windows_mode: Optional[bool] = False,
         *,
         label: str | None = None,
         info: str | None = None,
@@ -68,6 +122,9 @@ class Log(FormComponent):
         render: bool = True,
     ):
         """
+        For all the xterm options, please refer to the xterm.js documentation:
+        https://xtermjs.org/docs/api/terminal/interfaces/iterminaloptions/
+
         Parameters:
             log_file: the log file path to read from.
             tail: from the end of the file, the number of lines to start read from.
@@ -92,6 +149,45 @@ class Log(FormComponent):
         self.fd = None
         self.stop_reading = False
 
+        self.xterm_allow_proposed_api = xterm_allow_proposed_api
+        self.xterm_allow_transparency = xterm_allow_transparency
+        self.xterm_alt_click_moves_cursor = xterm_alt_click_moves_cursor
+        self.xterm_convert_eol = xterm_convert_eol
+        self.xterm_cursor_blink = xterm_cursor_blink
+        self.xterm_cursor_inactive_style = xterm_cursor_inactive_style
+        self.xterm_cursor_style = xterm_cursor_style
+        self.xterm_cursor_width = xterm_cursor_width
+        self.xterm_custom_glyphs = xterm_custom_glyphs
+        self.xterm_disable_stdin = xterm_disable_stdin
+        self.xterm_document_override = xterm_document_override
+        self.xterm_draw_bold_text_in_bright_colors = (
+            xterm_draw_bold_text_in_bright_colors
+        )
+        self.xterm_fast_scroll_modifier = xterm_fast_scroll_modifier
+        self.xterm_fast_scroll_sensitivity = xterm_fast_scroll_sensitivity
+        self.xterm_font_family = xterm_font_family
+        self.xterm_font_size = xterm_font_size
+        self.xterm_font_weight = xterm_font_weight
+        self.xterm_font_weight_bold = xterm_font_weight_bold
+        self.xterm_ignore_bracketed_paste_mode = xterm_ignore_bracketed_paste_mode
+        self.xterm_letter_spacing = xterm_letter_spacing
+        self.xterm_line_height = xterm_line_height
+        self.xterm_log_level = xterm_log_level
+        self.xterm_mac_option_click_forces_selection = (
+            xterm_mac_option_click_forces_selection
+        )
+        self.xterm_mac_option_is_meta = xterm_mac_option_is_meta
+        self.xterm_minimum_contrast_ratio = xterm_minimum_contrast_ratio
+        self.xterm_overview_ruler_width = xterm_overview_ruler_width
+        self.xterm_rescale_overlapping_glyphs = xterm_rescale_overlapping_glyphs
+        self.xterm_screen_reader_mode = xterm_screen_reader_mode
+        self.xterm_scroll_on_user_input = xterm_scroll_on_user_input
+        self.xterm_scroll_sensitivity = xterm_scroll_sensitivity
+        self.xterm_scrollback = xterm_scrollback
+        self.xterm_smooth_scroll_duration = xterm_smooth_scroll_duration
+        self.xterm_tab_stop_width = xterm_tab_stop_width
+        self.xterm_windows_mode = xterm_windows_mode
+
         super().__init__(
             label=label,
             info=info,
@@ -122,7 +218,7 @@ class Log(FormComponent):
         return {"type": "string"}
 
     def example_payload(self) -> Any:
-        return "Hello!!"
+        pass
 
     def example_value(self) -> Any:
-        return "Hello!!"
+        pass

src/backend/gradio_log/log.pyi

@@ -5,7 +5,6 @@ from typing import Any, Callable
 from gradio.components.base import FormComponent
 from gradio.events import Events
 
-
 class log(FormComponent):
 
     def find_start_position(self) -> int:
@@ -169,6 +168,44 @@ class Log(FormComponent):
         log_file: str = None,
         tail: int = 100,
         dark: bool = False,
+        xterm_allow_proposed_api: Optional[bool] = False,
+        xterm_allow_transparency: Optional[bool] = False,
+        xterm_alt_click_moves_cursor: Optional[bool] = True,
+        xterm_convert_eol: Optional[bool] = False,
+        xterm_cursor_blink: Optional[bool] = False,
+        xterm_cursor_inactive_style: Literal[
+            "outline", "block", "bar", "underline", "none"
+        ] = "outline",
+        xterm_cursor_style: Literal["block", "underline", "bar"] = "block",
+        xterm_cursor_width: Optional[int] = 1,
+        xterm_custom_glyphs: Optional[bool] = False,
+        xterm_disable_stdin: Optional[bool] = True,
+        xterm_document_override: Optional[Any] = None,
+        xterm_draw_bold_text_in_bright_colors: Optional[bool] = True,
+        xterm_fast_scroll_modifier: Optional[
+            Literal["none", "alt", "ctrl", "shift"]
+        ] = "alt",
+        xterm_fast_scroll_sensitivity: Optional[int] = 1,
+        xterm_font_family: Optional[str] = "courier-new, courier, monospace",
+        xterm_font_size: Optional[int] = 15,
+        xterm_font_weight: Optional[FontWeight] = "normal",
+        xterm_font_weight_bold: Optional[FontWeight] = "bold",
+        xterm_ignore_bracketed_paste_mode: Optional[bool] = False,
+        xterm_letter_spacing: Optional[float] = 0,
+        xterm_line_height: Optional[float] = 1.0,
+        xterm_log_level: Optional[LogLevel] = "info",
+        xterm_mac_option_click_forces_selection: Optional[bool] = False,
+        xterm_mac_option_is_meta: Optional[bool] = False,
+        xterm_minimum_contrast_ratio: Optional[int] = 1,
+        xterm_overview_ruler_width: Optional[int] = 0,
+        xterm_rescale_overlapping_glyphs: Optional[bool] = False,
+        xterm_screen_reader_mode: Optional[bool] = False,
+        xterm_scroll_on_user_input: Optional[bool] = True,
+        xterm_scroll_sensitivity: Optional[int] = 1,
+        xterm_scrollback: Optional[int] = 1000,
+        xterm_smooth_scroll_duration: Optional[int] = 0,
+        xterm_tab_stop_width: Optional[int] = 8,
+        xterm_windows_mode: Optional[bool] = False,
         *,
         label: str | None = None,
         info: str | None = None,
@@ -184,6 +221,9 @@ class Log(FormComponent):
         render: bool = True,
     ):
         """
+        For all the xterm options, please refer to the xterm.js documentation:
+        https://xtermjs.org/docs/api/terminal/interfaces/iterminaloptions/
+
         Parameters:
             log_file: the log file path to read from.
             tail: from the end of the file, the number of lines to start read from.
@@ -208,6 +248,45 @@ class Log(FormComponent):
         self.fd = None
         self.stop_reading = False
 
+        self.xterm_allow_proposed_api = xterm_allow_proposed_api
+        self.xterm_allow_transparency = xterm_allow_transparency
+        self.xterm_alt_click_moves_cursor = xterm_alt_click_moves_cursor
+        self.xterm_convert_eol = xterm_convert_eol
+        self.xterm_cursor_blink = xterm_cursor_blink
+        self.xterm_cursor_inactive_style = xterm_cursor_inactive_style
+        self.xterm_cursor_style = xterm_cursor_style
+        self.xterm_cursor_width = xterm_cursor_width
+        self.xterm_custom_glyphs = xterm_custom_glyphs
+        self.xterm_disable_stdin = xterm_disable_stdin
+        self.xterm_document_override = xterm_document_override
+        self.xterm_draw_bold_text_in_bright_colors = (
+            xterm_draw_bold_text_in_bright_colors
+        )
+        self.xterm_fast_scroll_modifier = xterm_fast_scroll_modifier
+        self.xterm_fast_scroll_sensitivity = xterm_fast_scroll_sensitivity
+        self.xterm_font_family = xterm_font_family
+        self.xterm_font_size = xterm_font_size
+        self.xterm_font_weight = xterm_font_weight
+        self.xterm_font_weight_bold = xterm_font_weight_bold
+        self.xterm_ignore_bracketed_paste_mode = xterm_ignore_bracketed_paste_mode
+        self.xterm_letter_spacing = xterm_letter_spacing
+        self.xterm_line_height = xterm_line_height
+        self.xterm_log_level = xterm_log_level
+        self.xterm_mac_option_click_forces_selection = (
+            xterm_mac_option_click_forces_selection
+        )
+        self.xterm_mac_option_is_meta = xterm_mac_option_is_meta
+        self.xterm_minimum_contrast_ratio = xterm_minimum_contrast_ratio
+        self.xterm_overview_ruler_width = xterm_overview_ruler_width
+        self.xterm_rescale_overlapping_glyphs = xterm_rescale_overlapping_glyphs
+        self.xterm_screen_reader_mode = xterm_screen_reader_mode
+        self.xterm_scroll_on_user_input = xterm_scroll_on_user_input
+        self.xterm_scroll_sensitivity = xterm_scroll_sensitivity
+        self.xterm_scrollback = xterm_scrollback
+        self.xterm_smooth_scroll_duration = xterm_smooth_scroll_duration
+        self.xterm_tab_stop_width = xterm_tab_stop_width
+        self.xterm_windows_mode = xterm_windows_mode
+
         super().__init__(
             label=label,
             info=info,
@@ -238,10 +317,10 @@ class Log(FormComponent):
         return {"type": "string"}
 
     def example_payload(self) -> Any:
-        return "Hello!!"
+        pass
 
     def example_value(self) -> Any:
-        return "Hello!!"
+        pass
 
     
     def load(self,

src/demo/app.py

@@ -1,11 +1,9 @@
-from pathlib import Path
 import logging
-import gradio as gr
+from pathlib import Path
 
+import gradio as gr
 from gradio_log import Log
 
-import logging
-
 
 class CustomFormatter(logging.Formatter):
 
@@ -51,7 +49,6 @@ logger.info("The logs will be displayed in here.")
 
 
 def create_log_handler(level):
-
     def l(text):
         getattr(logger, level)(text)
 
@@ -64,7 +61,7 @@ with gr.Blocks() as demo:
         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)
+    Log(log_file, dark=True)
 
 
 if __name__ == "__main__":

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.'}, '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': []}}}
+_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': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -38,14 +38,12 @@ pip install gradio_log
 ## Usage
 
 ```python
-from pathlib import Path
 import logging
-import gradio as gr
+from pathlib import Path
 
+import gradio as gr
 from gradio_log import Log
 
-import logging
-
 
 class CustomFormatter(logging.Formatter):
 
@@ -91,7 +89,6 @@ logger.info("The logs will be displayed in here.")
 
 
 def create_log_handler(level):
-
     def l(text):
         getattr(logger, level)(text)
 
@@ -104,7 +101,7 @@ with gr.Blocks() as demo:
         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)
+    Log(log_file, dark=True)
 
 
 if __name__ == "__main__":
@@ -145,7 +142,7 @@ The code snippet below is accurate in cases where the component is used as both
 
  ```python
 def predict(
-    value: typing.Any
+    value: Any
 ) -> Unknown:
     return value
 ```

src/frontend/Index.svelte

@@ -26,6 +26,41 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus | undefined = undefined;
+	export let xterm_allow_proposed_api;
+	export let xterm_allow_transparency;
+	export let xterm_alt_click_moves_cursor;
+	export let xterm_convert_eol;
+	export let xterm_cursor_blink;
+	export let xterm_cursor_inactive_style;
+	export let xterm_cursor_style;
+	export let xterm_cursor_width;
+	export let xterm_custom_glyphs;
+	export let xterm_disable_stdin;
+	export let xterm_document_override;
+	export let xterm_draw_bold_text_in_bright_colors;
+	export let xterm_fast_scroll_modifier;
+	export let xterm_fast_scroll_sensitivity;
+	export let xterm_font_family;
+	export let xterm_font_size;
+	export let xterm_font_weight;
+	export let xterm_font_weight_bold;
+	export let xterm_ignore_bracketed_paste_mode;
+	export let xterm_letter_spacing;
+	export let xterm_line_height;
+	export let xterm_log_level;
+	export let xterm_mac_option_click_forces_selection;
+	export let xterm_mac_option_is_meta;
+	export let xterm_minimum_contrast_ratio;
+	export let xterm_overview_ruler_width;
+	export let xterm_rescale_overlapping_glyphs;
+	export let xterm_right_click_selects_word;
+	export let xterm_screen_reader_mode;
+	export let xterm_scroll_on_user_input;
+	export let xterm_scroll_sensitivity;
+	export let xterm_scrollback;
+	export let xterm_smooth_scroll_duration;
+	export let xterm_tab_stop_width;
+	export let xterm_windows_mode;
 
 	let term;
 	let termNode;
@@ -40,8 +75,42 @@
 
 	onMount(() => {
 		term = new xterm.Terminal({
-			// allowTransparency: true,
 			theme,
+			allowProposedApi: xterm_allow_proposed_api,
+			allowTransparency: xterm_allow_transparency,
+			altClickMovesCursor: xterm_alt_click_moves_cursor,
+			convertEol: xterm_convert_eol,
+			cursorBlink: xterm_cursor_blink,
+			cursorInactiveStyle: xterm_cursor_inactive_style,
+			cursorStyle: xterm_cursor_style,
+			cursorWidth: xterm_cursor_width,
+			customGlyphs: xterm_custom_glyphs,
+			disableStdin: xterm_disable_stdin,
+			documentOverride: xterm_document_override,
+			drawBoldTextInBrightColors: xterm_draw_bold_text_in_bright_colors,
+			fastScrollModifier: xterm_fast_scroll_modifier,
+			fastScrollSensitivity: xterm_fast_scroll_sensitivity,
+			fontFamily: xterm_font_family,
+			fontSize: xterm_font_size,
+			fontWeight: xterm_font_weight,
+			fontWeightBold: xterm_font_weight_bold,
+			ignoreBracketedPasteMode: xterm_ignore_bracketed_paste_mode,
+			letterSpacing: xterm_letter_spacing,
+			lineHeight: xterm_line_height,
+			logLevel: xterm_log_level,
+			macOptionClickForcesSelection: xterm_mac_option_click_forces_selection,
+			macOptionIsMeta: xterm_mac_option_is_meta,
+			minimumContrastRatio: xterm_minimum_contrast_ratio,
+			overviewRulerWidth: xterm_overview_ruler_width,
+			rescaleOverlappingGlyphs: xterm_rescale_overlapping_glyphs,
+			rightClickSelectsWord: xterm_right_click_selects_word,
+			screenReaderMode: xterm_screen_reader_mode,
+			scrollOnUserInput: xterm_scroll_on_user_input,
+			scrollSensitivity: xterm_scroll_sensitivity,
+			smoothScrollDuration: xterm_smooth_scroll_duration,
+			tabStopWidth: xterm_tab_stop_width,
+			scrollback: xterm_scrollback,
+			windowsMode: xterm_windows_mode,
 		});
 		term.open(termNode);
 		const fitAddon = new addon.FitAddon();
@@ -49,6 +118,16 @@
 		setTimeout(() => {
 			fitAddon.fit();
 		}, 300);
+
+		const handleWindowResize = () => {
+			fitAddon.fit();
+		};
+
+		window.addEventListener("resize", handleWindowResize);
+
+		return () => {
+			window.removeEventListener("resize", handleWindowResize);
+		};
 	});
 
 	$: if (term && value) {

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_log"
-version = "0.0.3"
+version = "0.0.4"
 description = "A Log component for Gradio which can easily show some log file in the interface."
 readme = "README.md"
 license = "Apache-2.0"
@@ -43,7 +43,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_log/templates", "*.pyi", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates"]
+artifacts = ["/backend/gradio_log/templates", "*.pyi", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates", "backend/gradio_log/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_log"]