const { createApp, ref, setup } = Vue;
import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";

const app = createApp({
    setup() {
        const models = ref(["stabilityai/stable-diffusion-xl-base-1.0","runwayml/stable-diffusion-v1-5"]);
        const selectedModel = ref(models.value[0]);
        const token = ref("");
        const prompt = ref("Mughal cyberpunk city");
        const generatedImageUrl = ref("");

        const generateImage = async () => {
            console.log("Generating image...");
            const hf = new HfInference(token.value);
            const generatedImageBlob = await hf.textToImage({
                inputs: prompt.value,
                model: selectedModel.value,
              });
            console.log(generatedImage);
            generatedImageUrl.value = URL.createObjectURL(generatedImageBlob); 
        }

        return { 
            models,
            selectedModel,
            token,
            prompt,
            generateImage,
            generatedImageUrl
        }
    }
});

app.mount("#text-to-image-app");