API unnamed endpoints error

🔒 Gradio
1

I have tried to communicate with various Gradio and Huggingface spaces open API endpoints but hit the same error every time no matter what the predict structure.

This is the console error on a type/catch

script.js:39 An error occurred: 
{type: 'status', endpoint: '/chat', fn_index: 19, time: Fri Oct 20 2023 17:58:57 GMT+0100 (British Summer Time), queue: true, …}
code
: 
undefined
endpoint
: 
"/chat"
fn_index
: 
19
message
: 
null
queue
: 
true
stage
: 
"error"
success
: 
false
time
: 
Fri Oct 20 2023 17:58:57 GMT+0100 (British Summer Time) {}
type
: 
"status"
[[Prototype]]
: 
Object

All the models on Hugging Face are public. The javascript looks like this:



// import { client } from "@gradio/client";
import { client } from "./node_modules/@gradio/client/dist/index.js";


// Wrapping the async operations inside an async function
async function runApp() {
    try {
        console.log("Fetching image...");
        const response_0 = await fetch("images/5.jpg");
        console.log("Image fetched!");

        const exampleImage = await response_0.blob();
        console.log("Converted to blob!");

        console.log("Initializing Gradio client...");
        const app = await client("https://j3nsykes-llava-v1api.hf.space/--replicas/kckqn/");

        const app_info = await app.view_api();
        console.log(app_info);

        console.log("Gradio client initialized!");
        console.log("Predicting...");


        const result = await app.predict(7, [
            "Howdy!", // string  in 'parameter_0' Textbox component
            exampleImage, 	// blob in 'parameter_8' Image component
            "Crop", // string  in 'Preprocess for non-square image' Radio component
        ]);
        console.log('prediction done');
        console.log(result.data);
    } catch (error) {
        console.error("An error occurred:", error);
    }

}

console.log("Script loaded");
document.getElementById("runAppButton").addEventListener("click", runApp);

I’m not sure what the issue is

2

Based on an old forum post I have updated my code using .submit for the unnamed endpoint. However, this still returns no data. it prints the console.log('callback…") but does not execute either if statement.


import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client/+esm";
//import { client } from "./node_modules/@gradio/client/dist/index.js";


// Wrapping the async operations inside an async function
async function runApp() {

    console.log("Fetching image...");
    const response_0 = await fetch("images/5.jpg");
    console.log("Image fetched!");

    const exampleImage = await response_0.blob();
    console.log("Converted to blob!");

    console.log("Initializing Gradio client...");
    const app = await client("https://j3nsykes-llava-v1api.hf.space/--replicas/kckqn/");

    const app_info = await app.view_api();
    console.log(app_info);

    console.log("Gradio client initialized!");
    console.log("Predicting...");


    let message = "Describe this image?";
    let history = [];
    let crop = "crop";
    let status = "";
    let data = null;
    function callback(msg) {
        console.log("call back...");
        if (msg.type == "data") {
            console.log(msg.data[0]);
        }
        if (msg.type == "data") {
            console.log(msg.data[0]);
        }
    }

    app.submit(7, [message, exampleImage, crop])
        .on("status", (evt) => {
            status = evt.stage;
            callback({ type: evt.type, data: evt.state });
        })
        .on("data", (evt) => {
            data = evt.data[0];
            callback({ type: evt.type, data: evt.data[0] });
        });
}



console.log("Script loaded");
document.getElementById("runAppButton").addEventListener("click", runApp);

Any help is greatly appreciated

3

The .predict method works on a named API endpoint so this seems to be an issue with how the unnamed endpoints are being addressed. Any help is appreciated

4

so i believe I have narrowed this down to a problem with addressing duplicate space hierarchies.
The unnamed API endpoint method below works with other spaces where the space is the original and not duplicated

const result = await app.predict(1, [
    "null",
]);

However, I have duplicated the space so i am following the duplicate method as follows

const app = await duplicate("badayvedat/LLaVA", { hf_token: "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", private: true });
const app_info = await app.view_api();
console.log(app_info);
const result = await app.predict(1, [
    "null",
]);

console.log(result.data);

This does not work. There is a 404 conflict error and the same uncaught type error returned. The complication is the original space LLaVA - a Hugging Face Space by badayvedat
does not have API endpoints. However a duplicate space LLaVA - a Hugging Face Space by ysharma does. I have duplicated from the latter. How to reference a duplicate of a duplicate to get the correct .predict API endpoint call?
This feels very close but still not functional