HELP PLEASE

[Manikandan192]

I'm encountering an issue where the image isn't displaying on my React frontend despite successfully passing all parameters to the server and confirming the existence of the output image in the designated folder. Below is the function responsible for generating the image: This is my image generation function:

  const generateImage = async () => {
    if (!prompt.trim()) {
      Swal.fire({
        icon: "error",
        title: "Error",
        text: "Empty prompt",
      });
      return; 
    }
      setIsLoading(true);
    try {
      const response = await axios.post(
        `${baseUrl}/v1/generation/text-to-image`,
        {
          prompt: prompt,
          negative_prompt: negativePromptDescription || "",
          sharpness: imagSharpness,
          guidanceScale: guidanceScale,
          perfomace_selection: selectedPerformance,
          image_number: 1,
        },
        {
          headers: { "Content-Type": "application/json" },
        }
      );

      const imageUrl = response.data.imageUrl;
      setImageUrl(imageUrl);
    } catch (error) {
      setError("error");
      console.error("error:", error.response?.data || error.message); // Check if error.response exists

      Swal.fire({
        icon: "error",
        title: "Error",
      });
    } finally {
      setIsLoading(false);
    }
  };

I attempted to specify the image/png media type, but this resulted in a blank PNG image appearing in the network tab and frontend

Regarding image display, here's the relevant section of code:

image display:

            <div className="flex flex-col items-center justify-start w-4/5 md:w-full">
              <div className="flex flex-col h-[302px] md:h-auto items-center justify-center w-[512px] sm:w-full">
                <img
                  src={imageUrl}
                  alt="Generated Image"
                  className="max-w-full max-h-full object-contain rounded-lg"
                  onClick={() => enlargeImage(imageUrl)}
                />
              </div>

[mrhan1993]

use this headers: { "Content-Type": "application/json", "Accept": "image/png" }, and try again

[Manikandan192]

i modified the image gen function as follows, but i still get a blank png as response in network tab

  const generateImage = async () => {
    if (!prompt.trim()) {
      Swal.fire({
        icon: "error",
        title: "Empty prompt",
      });
      return; 
    }
    setIsLoading(true);
    setError(null);
    try {
      const response = await axios.post(
        `${baseUrl}/v1/generation/text-to-image`,
        {
          prompt: prompt,
          negative_prompt: negativePromptDescription || "",
          sharpness: imagSharpness,
          guidanceScale: guidanceScale,
          perfomace_selection: selectedPerformance,
          image_number: 1,
        },
        {
          headers: { "Content-Type": "application/json", "Accept": "image/png" },
          responseType: 'arraybuffer',
        }
      );
      const ImageData = new Uint8Array(response.data);
      const imageUrl = `data:image/png;base64,${btoa(String.fromCharCode.apply(null,ImageData))}`
      setImageUrl(imageUrl);
    } catch (error) {
      setError("error");
      console.error("error:", error.response?.data || error.message); // Check if error.response exists

      Swal.fire({
        icon: "error",
        title: "Error",
      });
    } finally {
      setIsLoading(false);
    }
  };

Any help would be appretiated

[mrhan1993]

This beats me. I don't understand js.