Add component <-> server direct communication support, as well as a "file explorer" component

[aliabid94]

Closes: #3681

Added ability for components to directly communicate with the backend. This PR includes a basic example component HostFile that utilizes this to get the directory structure from the backend. In host_file.py we have this function:

    @server
    def ls(self, y: list[str] | None) -> tuple[list[str], list[str]] | None:
        ...
        files = []
        folders = []
        for f in os.listdir(absolute_path):
            if os.path.isfile(os.path.join(absolute_path, f)):
                files.append(f)
            else:
                folders.append(f)
        return folders, files

And then we can use this directly in our frontend component as such:

	export let server: {
		ls: (arg0: string[]) => Promise<[string[], string[]]>;
	};
        contents = await server.ls(path);

The HostFile implemented here works and was added to demonstrate how the syntax of this works. It could be extracted out as a custom component. It could also be cleaned up and properly implemented as a core component, for the purpose of having a core component that can be used as a template for a component with a server function.

---

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details
📓	Notebooks	matching!

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/5c466fe817b638deb4a710def12947dfc37402dc/gradio-3.46.1-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@5c466fe817b638deb4a710def12947dfc37402dc#subdirectory=client/python"

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/app	minor
@gradio/client	minor
@gradio/file	minor
@gradio/fileexplorer	minor
@gradio/theme	minor
gradio	minor
gradio_client	minor

With the following changelog entry.

new FileExplorer component

Thanks to a new capability that allows components to communicate directly with the server without passing data via the value, we have created a new FileExplorer component.

This component allows you to populate the explorer by passing a glob, but only provides the selected file(s) in your prediction function.

Users can then navigate the virtual filesystem and select files which will be accessible in your predict function. This component will allow developers to build more complex spaces, with more flexible input options.

For more information check the FileExplorer documentation.

⚠️ The changeset file for this pull request has been modified manually, so the changeset generation bot has been disabled. To go back into automatic mode, delete the changeset file.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[abidlabs]

cc @osanseviero @apolinario who was asking for a "file explorer" type component

[osanseviero]

cc @Wauplin for vis as well

[julien-c]

nice! cc @gary149 too

[pngwn]

I picked this up and cleaned up the HostFile. It has now been renamed to FileExplorer and focuses only on selecting files from the FS.

API looks like this:

gr.FileExplorer(
    ["themes/utils"],
    glob="**/{components,themes}/**/*.py",
    root=absolute_path,
    ignore_glob="**/__init__.py",
    file_count="multiple"
)

Focused on globs as they are powerful for inclusion. Value is a path to select, passing a folder selects all files in that folder. When used as an input it always passes a list of absolute paths, so should be pretty easy to use. file_count can be "multiple" or "single", same as gr.File()`.

vidjjer:

Screen.Recording.2023-10-02.at.17.41.18.mov

Run demo/file_explorer to test locally.

[pngwn]

This needs a highlight.

[abidlabs]

This screenshot.gif should be removed

[abidlabs]

Why is this file even in the gradio repo? It should be removed I think

[abidlabs]

Why is this file even in the gradio repo? It should be removed (I think it is a remnant from when we used to hardcode configs for our e2e tests)

[abidlabs]

Do we need this file?

[abidlabs]

Suggested change

	Preprocessing: passes the uploaded file as a {tempfile._TemporaryFileWrapper} or {List[tempfile._TemporaryFileWrapper]} depending on `file_count` (or a {bytes}/{List{bytes}} depending on `type`)
	Preprocessing: passes the selected file as a {str} absolute path or {list[str}} depending on `file_count`

[pngwn]

This can actually be either a file or directory and the path is relative to root. Although it should (and might already) accept an absolute path as well. I haven't tested that.

I changed to

    Preprocessing: passes the selected file or directory as a {str} path (relative to root) or {list[str}} depending on `file_count`

[pngwn]

Supporting . will probably need some frontend changes but very simple to implement.

[abidlabs]

Tried to test this @pngwn but I'm not able to run or build the frontend. I did:

1. pnpm i --ignore-scripts
2. bash scripts/build_frontend.sh

But I'm seeing this error:

Failed to resolve import "dequal" from "../fileexplorer/shared/utils.ts". Does the file exist?
12:05:11 PM [vite] Internal server error: Failed to resolve import "dequal" from "../fileexplorer/shared/utils.ts". Does the file exist?

Same when trying to just run the frontend:

Do you have any suggestions for how to fix? I was able to go through the code changes, they generally look good, although I've suggested a few tweaks for the backend. I think we'll also need to modify the gr.load() function so that it can handle server functions. I'm happy to make the backend changes, once I can get the frontend to work properly

As an aside, a lot of untouched files have are included in this PR because they've been reformatted by prettier. Can we remove those files from this PR to make it easier to review?

[abidlabs]

Made some tweaks to client/js/src/client.ts -- now gr.load() works as well. Sample test code:

import gradio as gr

gr.load("spaces/abidlabs/file-explorer-test").launch()

All the backend issues are fixed, I think the only thing left is a better UI if there are no matching files. Other than, LGTM! Really nice stuff @pngwn

[pngwn]

Will fix that empty thing and merge it in.

[abidlabs]

Oh we also need to implement an Example version of this component @pngwn

[abidlabs]

Thanks for adding the example component @pngwn! One thing I noticed is that if a single file is provided as the example, then the filename is spread out over multiple lines in the example:

import gradio as gr

demo = gr.Interface(lambda x:x,
                    gr.FileExplorer("**/*.*", root="flagged"),
                    gr.FileExplorer("**/*.*", root="flagged"),
                    examples=["log.csv"]
                   )
    
demo.launch()

[pngwn]

Ah, I'll fix that in the morning. I forgot that a single value can be passed.

[abidlabs]

Did some more testing and that was the only issue I could find. This is really nice!

[AnyaCoder]

import gradio as gr
import os
with gr.Blocks() as demo:
    gr.FileExplorer(
        glob="**/*.*",
        ignore_glob="**/__init__.py",
        height=500,
        root=".",
        file_count="multiple"
    )

os.environ["no_proxy"] = "localhost,127.0.0.1,0.0.0.0"

demo.launch()

The code above seems doesn't work well, please help.

[freddyaboulton]

hi @AnyaCoder ! Please create a new issue so we can take a look. Please be sure to include the gradio version you are using

[AnyaCoder]

hi @AnyaCoder ! Please create a new issue so we can take a look. Please be sure to include the gradio version you are using

thanks, my gradio version is 3.45, the problem is "It is not a directory tree", these files are listed above directly