Audio Component API endpoint not working with JS Client

[mayzyo]

Describe the bug

When I execute the code, I get the following error:

\venv\Lib\site-packages\pydantic\main.py", line 171, in __init__
    self.__pydantic_validator__.validate_python(data, self_instance=self)
pydantic_core._pydantic_core.ValidationError: 1 validation error for FileData
path
  Field required [type=missing, input_value={}, input_type=dict]
    For further information visit https://errors.pydantic.dev/2.6/v/missing

I fresh installed the latest version of Gradio in Python and @gradio/client in Javascript. Not sure what I'm missing here.
Everything works fine on the Gradio GUI.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr

with gr.Blocks() as file_transcribe:
    with gr.Row():
        with gr.Column(scale=1):
            audio = gr.Audio(
                label="Voice",
                interactive=True,
                type='filepath',
                max_length=10800,
                format='mp3',
                sources=["upload"]
            )
            with gr.Row():
                with gr.Column():
                    source = gr.Dropdown(
                        ["English", "Chinese", "Japanese", "German"],
                        value="English",
                        label="Source Language",
                        info="Select the language"
                    )
                with gr.Column():
                    target = gr.Dropdown(
                        ["English", "Simplified Chinese", "Japanese", "German"],
                        value="English",
                        label="Target Language",
                        info="Select the language"
                    )
            clbtn = gr.Button("Synthesize", variant="primary")
        with gr.Column(scale=1):
            text = gr.TextArea(label="Transcript", show_copy_button=True)
            file = gr.File(label="Output File")
            clbtn.click(transcribe, inputs=[audio, source, target], outputs=[text, file], concurrency_limit=4)

with gr.Blocks(title="Transcribe") as demo:
    gr.TabbedInterface(
        [file_transcribe],
        ["Audio File"]
    )

import { client } from "@gradio/client";

const blob = readFile()

// I checked and the blob does play correctly in the browser.
// var blobUrl = URL.createObjectURL(blob);
// var audio = new Audio();
// audio.src = blobUrl;
// audio.play();
						
const app = await client("http://localhost:7860/");
const result = await app.predict("/transcribe", [
				blob, 	// blob in 'Voice' Audio component		
				"English", // string  in 'Source Language' Dropdown component		
				"English", // string  in 'Translate to' Dropdown component
	]);

Screenshot

No response

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Windows
gradio version: 4.20.1
gradio_client version: 0.11.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.2.0
fastapi: 0.110.0
ffmpy: 0.3.2
gradio-client==0.11.0 is not installed.
httpx: 0.27.0
huggingface-hub: 0.21.4
importlib-resources: 6.1.3
jinja2: 3.1.3
markupsafe: 2.1.5
matplotlib: 3.8.3
numpy: 1.26.4
orjson: 3.9.15
packaging: 23.2
pandas: 2.2.1
pillow: 10.2.0
pydantic: 2.6.3
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.3.1
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.10.0
uvicorn: 0.27.1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2024.2.0
httpx: 0.27.0
huggingface-hub: 0.21.4
packaging: 23.2
typing-extensions: 4.10.0
websockets: 11.0.3

Severity

Blocking usage of gradio