Error: hf.imageToImage is not a function

[hideosnes]

I'm trying to build on Eliott Coyac's (image to text space) and Radamés Ajna's Observable. While I2T or T2I work just fine, when it comes to I2I I'm at a loss: Whatever I'm trying, I'm getting: "Error: hf.imageToImage is not a function".

Question: While the reference recommends inputs: new Blob([readFileSync("image.png")]) using the fs.readFileSync module, I'm wondering if there's a way around that. Here's 3 different attempts that were, unfortunately, unsuccessful.

Attempt 1: Fetching an image from a URL, converting it to a base64 string, and creating a Blob from this string.

< script type = "module" >
    import {
        HfInference
    } from "@huggingface/inference";

let running = false;

async function loadImageFromUrl(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`HTTP error status: ${response.status}`);
        const blob = await response.blob();
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = () => resolve(reader.result);
            reader.onerror = reject;
            reader.readAsDataURL(blob);
        });
    } catch (error) {
        console.error("Failed to load image:", error);
        throw error;
    }
}

async function launch() {
    if (running) {
        return;
    }
    running = true;

    try {
        const hf = new HfInference(document.getElementById("token").value.trim() || undefined);

        const imageUrl = "https://raw.githubusercontent.com/timothybrooks/instruct-pix2pix/main/imgs/example.jpg";
        const base64String = await loadImageFromUrl(imageUrl);
        console.log("Base64 String:", base64String);

        await hf.imageToImage({
            inputs: new Blob([base64String]), // Convert base64 string back to Blob
            parameters: {
                prompt: "turn him into a cyborg",
            },
            model: "timothybrooks/instruct-pix2pix",
        }).then((resultBlob) => {
            console.log("Result Blob:", resultBlob);
            const image = new Image();
            image.width = 300;
            image.src = URL.createObjectURL(resultBlob);
            return image;
        });

    } catch (err) {
        alert("Error: " + err.message);
    } finally {
        running = false;
    }
}

window.launch = launch; 
</script>

Attempt 2: Fetching an image from a URL, converting it to a Uint8Array (Raw Data) and creating a Blob from this array.

< script type = "module" >
    import {
        HfInference
    } from "@huggingface/inference";

let running = false;

async function loadImageFromUrl(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`HTTP error status: ${response.status}`);
        const blob = await response.blob(); // Fetch the image as a Blob
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = () => resolve(new Uint8Array(reader.result)); // Resolve with Uint8Array
            reader.onerror = reject;
            reader.readAsArrayBuffer(blob); // Read the Blob as an ArrayBuffer
        });
    } catch (error) {
        console.error("Failed to load image:", error);
        throw error;
    }
}

async function launch() {
    if (running) {
        return;
    }
    running = true;

    try {
        const hf = new HfInference(document.getElementById("token").value.trim() || undefined);

        const imageUrl = "https://raw.githubusercontent.com/timothybrooks/instruct-pix2pix/main/imgs/example.jpg";
        const base64String = await loadImageFromUrl(imageUrl);
        console.log("Binary Data:", base64String);
        console.log(typeof base64String); // Should log 'object', indicating it's a Uint8Array

        // Directly use the Uint8Array to create a Blob
        const resultBlob = new Blob([base64String], {
            type: 'image/jpeg'
        }); // Adjust the MIME type as needed

        await hf.imageToImage({
            inputs: resultBlob,
            parameters: {
                prompt: "turn him into a cyborg",
            },
            model: "timothybrooks/instruct-pix2pix",
        }).then((resultBlob) => {
            console.log("Result Blob:", resultBlob);
            const image = new Image();
            image.width = 300;
            image.src = URL.createObjectURL(resultBlob);
            document.body.appendChild(image); // Append the resulting image to the body
            return image;
        });

    } catch (err) {
        alert("Error: " + err.message);
    } finally {
        running = false;
    }
}

window.launch = launch; 
</script>

Attempt 3 (absolute overkill due to fun & stubbornness): Fetching an image from a URL, converting it to both a Blob and a base64 string, processing the base64 string (and removing the b64-prefix to get it as close to the package on hf when using the widget on the model page) to recreate a Blob.

< script type = "module" >
    import {
        HfInference
    } from "@huggingface/inference";

let running = false;
let imageBlob;

async function loadImageFromURL(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error status: ${response.status}`);
        }
        imageBlob = await response.blob(); // Correctly store fetched image as blob
        console.log("imageBlob (94): ", imageBlob);

        const base64String = await blobToBase64(imageBlob);

        return {
            blob: imageBlob,
            base64: base64String
        };
    } catch (error) {
        console.error('Error loading image:', error);
        throw error;
    }
}

function blobToBase64(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

async function launch() {
    if (running) {
        return;
    }
    running = true;

    try {
        const hf = new HfInference(document.getElementById("token").value.trim() || undefined);

        const url = "https://raw.githubusercontent.com/timothybrooks/instruct-pix2pix/main/imgs/example.jpg";

        await loadImageFromURL(url).then(async ({
            blob,
            base64
        }) => {
            if (blob && base64) {
                console.log('Image loaded successfully as imageBlob and Base64.');

                const resultBlob = await base64ToBlob(base64);
                console.log('Converted Blob:', resultBlob);

                await hf.imageToImage({
                    inputs: resultBlob, // Pass the converted Blob
                    model: "radames/instruct-pix2pix-img2img",
                    parameters: {
                        prompt: "astronaut"
                    }
                }).then(async (resultBlob) => {
                    const finalImage = new Image();
                    finalImage.width = 300;
                    finalImage.src = URL.createObjectURL(resultBlob);
                    return finalImage;
                })
            } else {
                console.log('Failed to load image as imageBlob and Base64.');
            }
        })

    } catch (err) {
        alert("MewMew " + err.message);
    } finally {
        running = false;
    }
}

function base64ToBlob(base64) {
    return new Promise((resolve, reject) => {
        try {
            // Ensure the base64 string starts with the expected prefix
            if (!base64.startsWith('data:image')) {
                reject(new Error("Invalid base64 string format"));
                return;
            }
            // Remove the data URI scheme prefix
            const base64Data = base64.split(',')[1];
            console.log("base64Data (without prefix): ", base64Data);
            if (!base64Data) {
                reject(new Error("No base64 data found"));
                return;
            }
            // Decode the base64 string
            const binaryStr = atob(base64Data);
            const len = binaryStr.length;
            const bytes = new Uint8Array(len);
            for (let i = 0; i < len; i++) {
                bytes[i] = binaryStr.charCodeAt(i);
            }
            resolve(new Blob([bytes]));
            resolve(new Blob([bytes], {
                type: 'image/jpeg'
            }));
        } catch (error) {
            reject(error); // Handle any errors that occur during decoding
        }
    });
}
window.launch = launch; 
</script>

[coyotte508]

Can you link to a space with your full code?

Make sure in your index.html you're using a recent version of @huggingface/inference in the import map