API Gradio Spaces error API request failed: 404 {"detail":"Not Found"}

Beginners
3

Hello here error 404


Response {
  [Symbol(realm)]: { settingsObject: {} },
  [Symbol(state)]: {
  aborted: false,
  rangeRequested: false,
  timingAllowPassed: false,
  requestIncludesCredentials: false,
  type: 'default',
  status: 404,
  timingInfo: null,
  cacheState: '',
  statusText: 'Not Found',
  headersList: HeadersList {
  [Symbol(headers map)]: Map(12) {
  'access-control-allow-credentials' => 'true',
  'connection' => 'keep-alive',
  'content-length' => '22',
  'content-type' => 'application/json',
  'date' => 'Sun, 23 Mar 2025 15:46:57 GMT',
  'link' => '<https://huggingface.co/spaces/trinhminhhieu/bgnbl>;rel="canonical"', 
  'server' => 'uvicorn',
  'vary' => 'origin, access-control-request-method, access-control-request-headers', 
  'x-proxied-host' => 'http://10.106.9.151',
  'x-proxied-path' => '/run/predict',
},
  [Symbol(headers map sorted)]: null
},
  urlList: [],
  body: {
  stream: <ref *1> ReadableStream {
  _state: 'readable',
  _reader: undefined,
  _storedError: undefined,
  _disturbed: false,
  _readableStreamController: ReadableStreamDefaultController {
  _controlledReadableStream: [Circular *1],
  _queue: S {
  _cursor: 0,
  _size: 0,
  _front: { _elements: [], _next: undefined },
  _back: { _elements: [], _next: undefined }
},
  _queueTotalSize: 0,
  _started: true,
  _closeRequested: false,
  _pullAgain: false,
  _pulling: false,
  _strategySizeAlgorithm: [Function],
  _strategyHWM: 0,
  _pullAlgorithm: [Function],
  _cancelAlgorithm: [Function]
}
},
  source: null,
  length: null
}
},
  [Symbol(headers)]: Headers {
  [Symbol(headers list)]: HeadersList {
  [Symbol(headers map)]: Map(12) {
  'access-control-allow-credentials' => 'true',
  'connection' => 'keep-alive',
  'content-length' => '22',
  'content-type' => 'application/json',
  'date' => 'Sun, 23 Mar 2025 15:46:57 GMT',
  'link' => '<https://huggingface.co/spaces/trinhminhhieu/bgnbl>;rel="canonical"', 
  'server' => 'uvicorn',
  'vary' => 'origin, access-control-request-method, access-control-request-headers', 
  'x-proxied-host' => 'http://10.106.9.151',
  'x-proxied-path' => '/run/predict',

},
  [Symbol(headers map sorted)]: null
},
  [Symbol(guard)]: 'response',
  [Symbol(realm)]: { settingsObject: {} }
}
}
Error: API request failed: 404 {"detail":"Not Found"}

here code nextjs api for cloudflare

/ /api/upload.js
export const runtime = "edge";

export default async function handler(req) {
  // if (req.method !== "POST") {
  //   return new Response(JSON.stringify({ error: "Method Not Allowed" }), {
  //     status: 405,
  //     headers: { "Content-Type": "application/json" },
  //   });
  // }

  try {
    // Get form data
    const formData = await req.formData();
    const imageFile = formData.get("image");

    if (!imageFile) {
      return new Response(JSON.stringify({ error: "No file uploaded" }), {
        status: 400,
        headers: { "Content-Type": "application/json" },
      });
    }

    // Convert the File object to ArrayBuffer
    const arrayBuffer = await imageFile.arrayBuffer();

    // Send to HF Space API
    const response = await fetch(
      "https://trinhminhhieu-bgnbl.hf.space/run/predict",
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${process.env.HF_TOKEN}`,
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: arrayBuffer,
      }
    );

    console.log(response);
    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`API request failed: ${response.status} ${errorText}`);
    }

    const result = await response.json();
    console.log("result", result);

    if (result.error) {
      throw new Error(result.error);
    }

    return new Response(
      JSON.stringify({
        processedImageUrl:
          result.data && result.data[0] ? result.data[0].url : result.url,
      }),
      {
        status: 200,
        headers: { "Content-Type": "application/json" },
      }
    );
  } catch (error) {
    console.error("Error:", error.message);
    return new Response(
      JSON.stringify({
        error: "Failed to process image",
        details: error.message,
      }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      }
    );
  }
}

app.py

with gr.Blocks() as demo:
    gr.Markdown("Background Removal ")
    gr.Markdown("Upload an image to remove the background.")

    with gr.Row():
        input_image = gr.Image(type="pil", label="Upload Image")
        output_image = gr.Image(type="pil", label="Output Image")

    btn = gr.Button("Remove Background")

    btn.click(remove_bg, inputs=input_image, outputs=output_image, concurrency_limit=None)


# demo.queue()
server = demo.launch(share=True)