gradio-viewer

---

tags: [gradio-custom-component, File] title: gradio_viewer short_description: Visualise files colorFrom: blue colorTo: yellow sdk: gradio pinned: false app_file: space.py

gradio_viewer

Visualise any type of files

Installation

pip install gradio_viewer

Usage

import gradio as gr
from gradio_viewer import Viewer


def set_interface():
    view_with_ms = Viewer(
        value=[
            "./demo/data/Le_Petit_Chaperon_Rouge_Modifie.docx",
            "./demo/data/mermaid_graph-2.html",
            "./demo/data/graphique_couts_annuels.png",
            "./demo/data/Le_Petit_Chaperon_Rouge.zouzou",
            "./demo/data/viewer.py",
        ],
        elem_classes=["visualisation"],
        n=0,
        height=300,
        visible=True,
        ms_files=True,
    )

    view_without_ms = Viewer(
        value=[
            "./demo/data/Le_Petit_Chaperon_Rouge_Modifie.docx",
            "./demo/data/mermaid_graph-2.html",
            "./demo/data/graphique_couts_annuels.png",
            "./demo/data/Le_Petit_Chaperon_Rouge.zouzou",
        ],
        elem_classes=["visualisation"],
        n=1,
        height=300,
        visible=True,
        ms_files=False,
    )
    empty_view1 = view_with_ms
    empty_view2 = view_without_ms
    return view_with_ms, view_without_ms, empty_view1, empty_view2


with gr.Blocks() as demo:
    with gr.Row():
        view_with_ms = Viewer(visible=False)
        view_without_ms = Viewer(visible=False)
        empty_view1 = Viewer(visible=False)
        empty_view2 = Viewer(visible=False)
    demo.load(
        set_interface, outputs=[view_with_ms, view_without_ms, empty_view1, empty_view2]
    ).then(
        fn=lambda: (
            Viewer(visible=False, value=None, elem_id="empty1"),
            Viewer(visible=False, value=[], elem_id="empty2"),
        ),
        outputs=[empty_view1, empty_view2],
    )

if __name__ == "__main__":
    demo.launch()

Viewer

Initialization

name	type	default	description
value	Any	None	None
height	int | None	None	None
label	str | None	None	None
info	str | None	None	None
show_label	bool | None	None	None
container	bool	True	None
scale	int | None	None	None
min_width	int | None	None	None
interactive	bool | None	None	None
visible	bool	True	None
elem_id	str | None	None	None
elem_classes	list[str] | str | None	None	None
render	bool	True	None
load_fn	Callable[..., Any] | None	None	None
every	Timer | float | None	None	None
n	int	0	None
max_size	int	5000000	None
max_pages	int	100	None
ms_files	bool	True	None
libre_office	bool	True	None

Events

name	description
change
upload

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 data after preprocessing, sent to the user's function in the backend.
• As input: Should return, expects a str filepath or URL, or a list[str] of filepaths/URLs.

def predict(
    value: str
) -> str | list[str] | None:
    return value