Cannot connect to SSE endpoint

[AndreyVLD]

Describe the bug

There is a public Gradio API to this project: https://huggingface.co/spaces/yisol/IDM-VTON and I would like to call the /tryon endpoint with app.predict but I get the following error:
Cannot connect to SSE endpoint: https://yisol-idm-vton.hf.space/queue/data?session_hash=8029nofpwww..
I have followed the API call template from the Gradio Page of the project.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import * as fs from "fs";
import { Client } from "@gradio/client";
export const api = async () => {
  // eslint-disable-next-line camelcase,
  const hfApp = await Client.connect("yisol/IDM-VTON");
  const placeholderImage = fs.readFileSync("../img/walter.png");
  const results = await hfApp.predict("/tryon", [
    {"background": placeholderImage, "layers": [placeholderImage], "composite": placeholderImage},
    placeholderImage,
    "Hello!!",
    true,
    false,
    30,
    42,
  ]);

  const app_info = await hfApp.view_api();
  // console.log(results);
  console.log(await hfApp.view_api());
  return placeholderImage;
};

api().then((res) => {
  console.log(res);
});

Screenshot

No response

Logs

Cannot connect to SSE endpoint: https://yisol-idm-vton.hf.space/queue/data?session_hash=8029nofpwww

System Info

I have run the command: 'npm i @gradio/client' in a new clean JavaScript project, the error still persists.

Severity

Blocking usage of gradio

[hannahblair]

Hi @AndreyVLD! Thanks for raising this. Can you confirm what environment you're running this in, and do you run into an error when connecting to the space (before running the predict function)?

As a side note, I ran your example and was able to successfully connect to the space. We have a few issues right now with dealing with files however: #7778 #7834 #6623

[AndreyVLD]

To answer your questions:

• If I remove this snipped:

   const results = await hfApp.predict("/tryon", [
    {"background": placeholderImage, "layers": [placeholderImage], "composite": placeholderImage},
    placeholderImage,
    "Hello!!",
    true,
    false,
    30,
    42,
  ]); 

I correctly get the following output as I print hfApp.view_api():

{
  named_endpoints: {
    '/tryon': { parameters: [Array], returns: [Array], type: [Object] }
  },
  unnamed_endpoints: {}
}

so it connects.

• I run this as a standalone backend node module with only gradio_client as a dependency. Gradio version is: @gradio/client": "^0.18.0".
• The js file contains only the code from above and I run it with node.

[AndreyVLD]

@hannahblair I think it might be something specific to JavaScript version of Gradio since running this code snippet works fine and returns the temp path to 2 images (as is the API specification of this endpoint):

from gradio_client import Client, file


def main():
    client = Client("yisol/IDM-VTON")
    img = file('walter.png')

    print(client.view_api())
    result = client.predict(
        dict={"background": img,
              "layers": [img], "composite": img},
        garm_img=img,
        garment_des="Hello!!",
        is_checked=True,
        is_checked_crop=False,
        denoise_steps=30,
        seed=42,
        api_name="/tryon"
    )
    print(result)

if __name__ == '__main__':
    main()

[hannahblair]

Hi @AndreyVLD! This seems like it was due to the way we were handling files. I've just tested this out with #8462 and have been able to successfully send an image to that space now.

Here's my demo:

import { Client, handle_file } from "@gradio/client";

const api = async () => {
  const hfApp = await Client.connect("yisol/IDM-VTON");
  const placeholderImage = handle_file("./dog.png");
  const results = await hfApp.predict("/tryon", [
    {
      background: placeholderImage,
      layers: [placeholderImage],
      composite: placeholderImage,
    },
    placeholderImage,
    "Hello!!",
    true,
    false,
    30,
    42,
  ]);

  const app_info = await hfApp.view_api();
  return placeholderImage;
};

api().then((res) => {
  console.log(res);
});

With the updates in #8462 you can pass local files using the handle_file function. Give it a go and let me know you encounter any issues!