I am trying to upload an image that is generated by the stable diffusion to IPFS via NFT.storage but when I check my image ipfs link it displays a small grey box in the center of the screen. Which I assume means its not uploading correctly? The actual metadata looks correct its just the image I'm having a problem with. I am using react.js.
Metadata:
https://ipfs.io/ipfs/bafyreifkoil4343lw2zsveykodlp57bfvq76drizg5o46z5chpnkjtivwi/metadata.json
Image:
ipfs://bafybeifoskzsaa3lxxoyzyncujsua4den7djnkbpjho35e5aguepbu4nom/image.jpeg
Here is my code:
const createImage = async () => {
console.log("generating...");
const URL = `https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2`;
// Send the request
const response = await axios({
url: URL,
method: "POST",
headers: {
Authorization: `Bearer ${process.env.REACT_APP_HUGGING_FACE_KEY}`,
Accept: "application/json",
"Content-Type": "application/json",
},
data: JSON.stringify({
inputs: description,
options: {
wait_for_model: true,
height: 480,
width: 480,
num_inference_steps: 200,
guidance_scale: 5,
},
}),
responseType: "arraybuffer",
});
const type = response.headers["content-type"];
const data = response.data;
const base64data = Buffer.from(data).toString("base64");
const img = `data:${type};base64,` + base64data; // <-- This is so we can render it on the page
setImage(img);
};
const uploadImage = async () => {
console.log("loading...");
// Create instance to NFT.Storage
const nftstorage = new NFTStorage({
token: process.env.REACT_APP_NFTSTORAGE,
});
const { ipnft } = await nftstorage.store({
image: new File([imageData], "image.jpeg", { type: "image/jpeg" }),
name: name,
description: description,
});
// Save the URL
const url = `https://ipfs.io/ipfs/${ipnft}/metadata.json`;
setURL(url);
console.log(url);
};
I have tried running my own IPFS node but still get the small grey box as described earlier. I have also tried using Pinata API but was still having problems with getting the image to be displayed which leads me to believe that it would be something to do with this part of the code
const base64data = Buffer.from(data).toString("base64");
const img = `data:${type};base64,` + base64data; // <-- This is so we can render it on the page
setImage(img);