js gradio client api upload image error

[sunnyan1989]

Describe the bug

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

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

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

const response_0 = await fetch("https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png");
const exampleImage = await response_0.blob();
						
const response_1 = await fetch("https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png");
const exampleImage = await response_1.blob();
						
const app = await client("https://levihsu-ootdiffusion.hf.space/--replicas/dnjhb/");
const result = await app.predict("/process_dc", [
				exampleImage, 	// blob in 'Model' Image component
				exampleImage, 	// blob in 'Garment' Image component		
				"Upper-body", // string  in 'Garment category (important option!!!)' Dropdown component		
				1, // number (numeric value between 1 and 4) in 'Images' Slider component		
				20, // number (numeric value between 20 and 40) in 'Steps' Slider component		
				1, // number (numeric value between 1.0 and 5.0) in 'Guidance scale' Slider component		
				-1, // number (numeric value between -1 and 2147483647) in 'Seed' Slider component
	]);

console.log(result.data);

Screenshot

No response

Logs

No response

System Info

backend python gradio 4.16.0
js gradio-client 0.13.0

Severity

Blocking usage of gradio

[freddyaboulton]

Looks like the js client is not adding the path field to the payload.

[fwag]

I've the same problem.

Using following code:

    <input id="photo" type="file">
    <div id="results"></div>

    <script type="module">
        //import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@0.18.0/dist/index.min.js";
	    import { Client } from "./node_modules/@gradio/client/dist/index.js";


    async function loaded(reader) {

        const response_0 = await fetch("https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png");
        const exampleImage = await response_0.blob();


        const app = await Client.connect('ratotna/unconscious');

        const result = await app.predict('/predict', [ exampleImage ]);
        console.log(result);

    }
    function read() {
        const reader = new FileReader();
        reader.addEventListener('load', () => loaded(reader))
        reader.readAsDataURL(photo.files[0]);
    }
    photo.addEventListener('input', read);
    </script>

On huggingface logs I get following error:

Running on local URL:  http://0.0.0.0:7860

To create a public link, set `share=True` in `launch()`.
Traceback (most recent call last):
  File "/usr/local/lib/python3.10/site-packages/gradio/queueing.py", line 527, in process_events
    response = await route_utils.call_process_api(
  File "/usr/local/lib/python3.10/site-packages/gradio/route_utils.py", line 270, in call_process_api
    output = await app.get_blocks().process_api(
  File "/usr/local/lib/python3.10/site-packages/gradio/blocks.py", line 1843, in process_api
    inputs = await self.preprocess_data(
  File "/usr/local/lib/python3.10/site-packages/gradio/blocks.py", line 1575, in preprocess_data
    inputs_cached = block.data_model(**inputs_cached)  # type: ignore
  File "/usr/local/lib/python3.10/site-packages/pydantic/main.py", line 176, 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.7/v/missing