When using Next.js, I make an API call like this:
const response = await fetch('/api/generateimageHG2');
This triggers the following function:
import { HfInference } from "@huggingface/inference";
export default async function generate (req, res) {
try{
const inference = new HfInference('[token]');
const response = await inference.textToImage({
model: "stabilityai/stable-diffusion-2",
inputs: "award winning high resolution photo of a giant dragon/((ladybird)) hybrid, [trending on artstation]",
parameters: {
negative_prompt: "blurry",
},
});
console.log (response);
res.status(200).send(response);
} catch (error) {
throw new Error('Error fetching property information: ' + error.message);
}
};
The console log output indicates that the response is:
Blob { size: 93803, type: 'image/jpeg' }
This confirms that it's a blob object.
I'm facing an obstacle trying to display this image on the screen. I attempted to use URL.createObjectURL but encountered an error. Any suggestions?