I can't use the Gradio Client API to make a prediction using images

Question

I am trying to send a image to the Gradio Client API following this example:

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 app = await client("airvit2/pet_classifier");
const result = await app.predict("/predict", [
                exampleImage,   // blob in 'img' Image component
    ]);

console.log(result.data);

But it returns this error:

{
    "type": "status",
    "endpoint": "/predict",
    "fn_index": 0,
    "time": "2024-03-17T18:36:53.270Z",
    "queue": true,
    "message": null,
    "stage": "error",
    "success": false
}

This is my Gradio code:

from fastai.vision.all import *
import gradio as gr

learn = load_learner('model.pkl')

def predict(img):
    print("Imagem: ", img)
    img = load_image(img)
    # img = PILImage.create(img)
    pred, pred_idx, probs = learn.predict(img)
    return pred

gr.Interface(fn = predict, inputs = gr.Image(type="pil", height = 224, width = 224), outputs = gr.Label(num_top_classes = 3)).launch(share = True)

I tried to change the Image Format to Blob, but it didn't work.

Answer 1

I was facing a similar issue, there might be some problem on what kind of data you are sending to the api endpoint of "/predict" through exampleImage, still looking to solve this error. You can also try to check the container logs in huggingface spaces of your deployed model.