Skip to content

Commit 2e8aff2

Browse files
radamesradames
committed
first commit
0 parents  commit 2e8aff2

18 files changed

+7885
-0
lines changed

Diff for: ‎.gitignore

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.eggs/
2+
dist/
3+
*.pyc
4+
__pycache__/
5+
*.py[cod]
6+
*$py.class
7+
__tmp/*
8+
*.pyi
9+
.mypycache
10+
.ruff_cache
11+
node_modules
12+
backend/**/templates/
13+
venv

Diff for: ‎README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
tags: [gradio-custom-component, SimpleImage, multimodal data, visualization, machine learning, robotics]
3+
title: gradio_rerun
4+
short_description: Rerun viewer with Gradio
5+
colorFrom: blue
6+
colorTo: yellow
7+
sdk: gradio
8+
pinned: false
9+
app_file: space.py
10+
---
11+
12+
# gradio_rerun
13+
14+
You can auto-generate documentation for your custom component with the `gradio cc docs` command.
15+
You can also edit this file however you like.

Diff for: ‎backend/gradio_rerun/__init__.py

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
from .rerun import Rerun
3+
4+
__all__ = ['Rerun']

Diff for: ‎backend/gradio_rerun/rerun.py

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
"""gr.SimpleImage() component."""
2+
3+
from __future__ import annotations
4+
5+
from pathlib import Path
6+
from typing import Any
7+
8+
from gradio_client import file
9+
from gradio_client.documentation import document
10+
11+
from gradio.components.base import Component
12+
from gradio.data_classes import GradioRootModel, FileData
13+
from gradio.events import Events
14+
15+
16+
class RerunData(GradioRootModel):
17+
"""
18+
Data model for Rerun component it can be a list of FileData, FileData, or as list of URLs.
19+
"""
20+
21+
root: list[FileData] | FileData | str | list[str]
22+
23+
24+
class Rerun(Component):
25+
"""
26+
Creates an image component that can be used to upload images (as an input) or display images (as an output).
27+
"""
28+
29+
EVENTS = [
30+
Events.clear,
31+
Events.change,
32+
Events.upload,
33+
]
34+
35+
data_model = RerunData
36+
37+
def __init__(
38+
self,
39+
value: list[str] | None = None,
40+
*,
41+
label: str | None = None,
42+
every: float | None = None,
43+
show_label: bool | None = None,
44+
show_download_button: bool = True,
45+
container: bool = True,
46+
scale: int | None = None,
47+
min_width: int = 160,
48+
height: int | str = 640,
49+
interactive: bool | None = None,
50+
visible: bool = True,
51+
elem_id: str | None = None,
52+
elem_classes: list[str] | str | None = None,
53+
render: bool = True,
54+
):
55+
"""
56+
Parameters:
57+
value: A path or URL for the default value that Rerun component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
58+
label: 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.
59+
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
60+
show_label: if True, will display label.
61+
show_download_button: If True, will display button to download image.
62+
container: If True, will place the component in a container - providing some extra padding around the border.
63+
scale: 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.
64+
min_width: 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.
65+
height: height of component in pixels. If a string is provided, will be interpreted as a CSS value. If None, will be set to 640px.
66+
interactive: if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.
67+
visible: If False, component will be hidden.
68+
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
69+
elem_classes: 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.
70+
render: 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.
71+
"""
72+
self.show_download_button = show_download_button
73+
self.height = height
74+
super().__init__(
75+
label=label,
76+
every=every,
77+
show_label=show_label,
78+
container=container,
79+
scale=scale,
80+
min_width=min_width,
81+
interactive=interactive,
82+
visible=visible,
83+
elem_id=elem_id,
84+
elem_classes=elem_classes,
85+
render=render,
86+
value=value,
87+
)
88+
89+
def preprocess(self, payload: FileData | list[FileData] | None) -> str | None:
90+
"""
91+
Parameters:
92+
payload: A FileData object containing the image data.
93+
Returns:
94+
A `str` containing the path to the image.
95+
"""
96+
if payload is None:
97+
return None
98+
return payload
99+
100+
def postprocess(
101+
self, value: list[FileData] | FileData | str | list[str]
102+
) -> RerunData:
103+
"""
104+
Parameters:
105+
value: Expects a `str` or `pathlib.Path` object containing the path to the image.
106+
Returns:
107+
A FileData object containing the image data.
108+
"""
109+
print(value)
110+
if value is None:
111+
return RerunData(root=[])
112+
113+
if not isinstance(value, list):
114+
value = [value]
115+
116+
def is_url(input: str) -> bool:
117+
return input.startswith("http://") or input.startswith("https://")
118+
119+
return RerunData(
120+
root=[
121+
FileData(
122+
path=file,
123+
orig_name=Path(file).name,
124+
size=Path(file).stat().st_size,
125+
)
126+
if not is_url(file)
127+
else file
128+
for file in value
129+
]
130+
)
131+
132+
def example_payload(self) -> Any:
133+
return [
134+
file(
135+
"https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd"
136+
),
137+
file(
138+
"https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd"
139+
),
140+
]
141+
142+
def example_value(self) -> Any:
143+
return [
144+
"https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
145+
"https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
146+
]

Diff for: ‎demo/__init__.py

Whitespace-only changes.

Diff for: ‎demo/app.py

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import gradio as gr
2+
from gradio_rerun import Rerun
3+
4+
5+
example = Rerun().example_value()
6+
7+
8+
def predict(url: str, file_path: str | list[str] | None):
9+
if url:
10+
return url
11+
return file_path
12+
13+
14+
with gr.Blocks(css=".gradio-container { max-width: unset!important; }") as demo:
15+
with gr.Row():
16+
with gr.Column():
17+
with gr.Group():
18+
file_path = gr.File(file_count="multiple", type="filepath")
19+
url = gr.Text(
20+
info="Or use a URL",
21+
label="URL",
22+
)
23+
with gr.Column():
24+
pass
25+
btn = gr.Button("Run", scale=0)
26+
with gr.Row():
27+
rerun_viewer = Rerun(height=900)
28+
29+
inputs = [file_path, url]
30+
outputs = [rerun_viewer]
31+
32+
gr.on([btn.click, file_path.upload], fn=predict, inputs=inputs, outputs=outputs)
33+
34+
gr.Examples(
35+
examples=[
36+
[
37+
None,
38+
"https://app.rerun.io/version/0.15.1/examples/detect_and_track_objects.rrd",
39+
],
40+
[
41+
["./examples/rgbd.rrd"],
42+
None,
43+
],
44+
[
45+
["./examples/rrt-star.rrd"],
46+
None,
47+
],
48+
[
49+
["./examples/structure_from_motion.rrd"],
50+
None,
51+
],
52+
[
53+
["./examples/structure_from_motion.rrd", "./examples/rrt-star.rrd"],
54+
None,
55+
],
56+
],
57+
fn=predict,
58+
inputs=inputs,
59+
outputs=outputs,
60+
)
61+
62+
if __name__ == "__main__":
63+
demo.launch()

Diff for: ‎demo/requirements.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
gradio_rerun

Diff for: ‎examples/rgbd.rrd

36.8 MB
Binary file not shown.

Diff for: ‎examples/rrt-star.rrd

10 MB
Binary file not shown.

Diff for: ‎examples/structure_from_motion.rrd

6.84 MB
Binary file not shown.

Diff for: ‎frontend/Example.svelte

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script lang="ts">
2+
import type { FileData } from "@gradio/client";
3+
4+
export let value: null | FileData;
5+
export let type: "gallery" | "table";
6+
export let selected = false;
7+
</script>
8+
9+
{#if value}
10+
<div
11+
class="container"
12+
class:table={type === "table"}
13+
class:gallery={type === "gallery"}
14+
class:selected
15+
>
16+
<img src={value.url} alt="" />
17+
</div>
18+
{/if}
19+
20+
<style>
21+
.container :global(img) {
22+
width: 100%;
23+
height: 100%;
24+
}
25+
26+
.container.selected {
27+
border-color: var(--border-color-accent);
28+
}
29+
30+
.container.table {
31+
margin: 0 auto;
32+
border: 2px solid var(--border-color-primary);
33+
border-radius: var(--radius-lg);
34+
overflow: hidden;
35+
width: var(--size-20);
36+
height: var(--size-20);
37+
object-fit: cover;
38+
}
39+
40+
.container.gallery {
41+
height: var(--size-20);
42+
max-height: var(--size-20);
43+
object-fit: cover;
44+
}
45+
.container img {
46+
object-fit: cover;
47+
}
48+
</style>

Diff for: ‎frontend/Index.svelte

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<svelte:options accessors={true} />
2+
3+
<script context="module" lang="ts">
4+
export { default as BaseExample } from "./Example.svelte";
5+
</script>
6+
7+
<script lang="ts">
8+
import "./app.css";
9+
import type { Gradio } from "@gradio/utils";
10+
11+
import { WebViewer } from "@rerun-io/web-viewer";
12+
import { onMount } from "svelte";
13+
14+
import { Block } from "@gradio/atoms";
15+
import { StatusTracker } from "@gradio/statustracker";
16+
import type { FileData } from "@gradio/client";
17+
import type { LoadingStatus } from "@gradio/statustracker";
18+
19+
export let elem_id = "";
20+
export let elem_classes: string[] = [];
21+
export let visible = true;
22+
export let height: number | string = 640;
23+
export let value: null | FileData[] | string[] = null;
24+
export let container = true;
25+
export let scale: number | null = null;
26+
export let min_width: number | undefined = undefined;
27+
export let loading_status: LoadingStatus;
28+
export let interactive: boolean;
29+
30+
export let gradio: Gradio<{
31+
change: never;
32+
upload: never;
33+
clear: never;
34+
clear_status: LoadingStatus;
35+
}>;
36+
37+
$: height = typeof height === "number" ? `${height}px` : height;
38+
39+
$: value, gradio.dispatch("change");
40+
let dragging: boolean;
41+
let rr: WebViewer;
42+
let ref: HTMLDivElement;
43+
44+
onMount(() => {
45+
rr = new WebViewer();
46+
rr.start(undefined, ref);
47+
return () => rr.stop();
48+
});
49+
50+
$: if (value !== null && Array.isArray(value)) {
51+
for (const file of value) {
52+
if (typeof file !== "string") {
53+
if (file.url) {
54+
rr.open(file.url);
55+
}
56+
} else {
57+
rr.open(file);
58+
}
59+
}
60+
}
61+
</script>
62+
63+
{#if !interactive}
64+
<Block
65+
{visible}
66+
variant={"solid"}
67+
border_mode={dragging ? "focus" : "base"}
68+
padding={false}
69+
{elem_id}
70+
{elem_classes}
71+
allow_overflow={false}
72+
{container}
73+
{scale}
74+
{min_width}
75+
>
76+
<StatusTracker
77+
autoscroll={gradio.autoscroll}
78+
i18n={gradio.i18n}
79+
{...loading_status}
80+
on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
81+
/>
82+
<div class="viewer" bind:this={ref} style:height />
83+
</Block>
84+
{/if}
85+
86+
<style>
87+
.viewer {
88+
width: 100%;
89+
}
90+
91+
:global(div.viewer > canvas) {
92+
position: initial !important;
93+
top: unset !important;
94+
}
95+
</style>

Diff for: ‎frontend/app.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "tailwindcss";

0 commit comments

Comments
 (0)