update

.gitattributes

@@ -37,3 +37,4 @@ src/backend/gradio_rerun/templates/component/re_viewer-Ds4oCzjL.js filter=lfs di
 src/examples/rgbd.rrd filter=lfs diff=lfs merge=lfs -text
 src/examples/rrt-star.rrd filter=lfs diff=lfs merge=lfs -text
 src/examples/structure_from_motion.rrd filter=lfs diff=lfs merge=lfs -text
+*.rrd filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -10,4 +10,5 @@ __tmp/*
 .ruff_cache
 node_modules
 backend/**/templates/
-venv
+venv
+.DS_Store

README.md

@@ -1,16 +1,26 @@
 ---
-tags: [gradio-custom-component, SimpleImage, multimodal data, visualization, machine learning, robotics]
+tags:
+  [
+    gradio-custom-component,
+    SimpleImage,
+    multimodal data,
+    visualization,
+    machine learning,
+    robotics,
+  ]
 title: gradio_rerun
 short_description: Rerun viewer with Gradio
 colorFrom: blue
 colorTo: yellow
 sdk: gradio
+sdk_version: 4.28.3
 pinned: false
 app_file: space.py
 ---
 
 # `gradio_rerun`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/radames/gradio-rerun-viewer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a>
 
 Rerun viewer with Gradio
 
@@ -287,16 +297,13 @@ bool
 </tr>
 </tbody></table>
 
-
 ### Events
 
-| name | description |
-|:-----|:------------|
-| `clear` | This listener is triggered when the user clears the Rerun using the X button for the component. |
+| name     | description                                                                                                                                                                                                                                                                           |
+| :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `clear`  | This listener is triggered when the user clears the Rerun using the X button for the component.                                                                                                                                                                                       |
 | `change` | Triggered when the value of the Rerun changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
-| `upload` | This listener is triggered when the user uploads a file into the Rerun. |
-
-
+| `upload` | This listener is triggered when the user uploads a file into the Rerun.                                                                                                                                                                                                               |
 
 ### User function
 
@@ -310,13 +317,12 @@ The code snippet below is accurate in cases where the component is used as both
 - **As output:** Is passed, a `str` containing the path to the image.
 - **As input:** Should return, expects a `str` or `pathlib.Path` object containing the path to the image.
 
- ```python
- def predict(
-     value: str | None
- ) -> list[gradio.data_classes.FileData]
-    | gradio.data_classes.FileData
-    | str
-    | list[str]:
-     return value
- ```
- 
+```python
+def predict(
+    value: str | None
+) -> list[gradio.data_classes.FileData]
+   | gradio.data_classes.FileData
+   | str
+   | list[str]:
+    return value
+```

css.css

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

examples/rgbd.rrd

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

examples/rrt-star.rrd

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

examples/structure_from_motion.rrd

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