File component can't be used as output if file_count multiple and caching examples

[freddyaboulton]

Describe the bug

If you have a gr.File(file_count="multiple") as output, you won't be able to cache examples since the FileSerializable can't handle multiple files.

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

import gradio as gr

examples=[["./rabbit.png","./lion.jpg"]]
gr.Interface(fn=lambda *x: list(x), 
             inputs=[gr.Image(source="upload", type="filepath", label="frame 1"),
                     gr.Image(source="upload", type="filepath", label="frame 2")],
        outputs=[gr.Files()], title="RAFT Optical Flow", examples=examples,
        cache_examples=True).launch(debug=True)

Screenshot

No response

Logs

raise return_result
  File "/Users/freddy/miniconda3/envs/gradio/lib/python3.8/site-packages/fsspec/asyn.py", line 53, in _runner
    result[0] = await coro
  File "/Users/freddy/sources/gradio/gradio/helpers.py", line 278, in create
    await self.cache()
  File "/Users/freddy/sources/gradio/gradio/helpers.py", line 318, in cache
    cache_logger.flag(output)
  File "/Users/freddy/sources/gradio/gradio/flagging.py", line 218, in flag
    component.deserialize(sample, save_dir=save_dir)
  File "/Users/freddy/sources/gradio/client/python/gradio_client/serializing.py", line 164, in deserialize
    raise ValueError(
ValueError: A FileSerializable component can only deserialize a string or a dict, not a: <class 'list'>
(gradio)

System Info

Latest but happens in other versions, e.g. 3.19

Severity

serious, but I can work around it

[abidlabs]

We should create a new Serializer class for the File and UploadButton component (maybe called MultiFileSerializer) that can handle both single files and lists of files. I've started creating new Serializer classes here: #3663. We can add this one there, WDYT @freddyaboulton?

[freddyaboulton]

Would the File and UploadButton components inherit from both then?

I’m thinking the FileSerializer should be made more general such that the multiple vs single file cases are handled the same way. We can make this backwards compatible and non-breaking I think

[abidlabs]

But the other file-based components (like Video or Audio) cannot support multiple files. It's cleaner to have two separate serializers imo. We can refactor FileSerializer to support multiple files, and have a separate MediaSerializer that handles single files instead if you prefer that. Also as part of #3663, I use the Serializer to provide docstring information as well for the client.