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

const app = createApp({
    setup() {
        const token = ref(localStorage.getItem("token") || "");
        const models = ref(["MIT/ast-finetuned-audioset-10-10-0.4593"]);
        const selectedAudio = ref("airplane-landing.mp3");
        const selectedModel = ref("");
        const loading = ref(false);
        const didErrorOccur = ref(false)
        const audioFiles = ref(['airplane-landing.mp3',
            'alien-spaceship.mp3',
            'hard_shoes.mp3',
            'labrador-barking.mp3',
            'old-car-engine.mp3',
            'tolling-bell.mp3']);
        const classificationLabels = ref([])


        const statusMessage = computed(() => {
            if (loading.value) return "Loading..."
            return "Ready"
        })

        const run = async () => {
            reset()
            loading.value = true;
            try {
                const hf = new HfInference(token.value);
                const audioData = await (await fetch(`sounds/${selectedAudio.value}`)).arrayBuffer()
                const result = await hf.audioClassification({
                    data: audioData,
                    model: selectedModel.value
                });
                console.log(result)
                classificationLabels.value = result
                loading.value = false;
            } catch (e) {
                console.error(e);
                loading.value = false;
                didErrorOccur.value = true
            }
        };
        const reset = () => {
            didErrorOccur.value = false
            loading.value = false
            classificationLabels.value = []
        }

        watch(selectedAudio, () => {
            reset()
        })

        watch(selectedModel, () => {
            reset()
        })

        onMounted(async () => {
            const localStorageToken = localStorage.getItem("token")
            if (localStorageToken) {
                token.value = localStorageToken;
            }
            selectedModel.value = models.value[0]
        });

        return {
            token,
            run,
            audioFiles,
            selectedAudio,
            models,
            selectedModel,
            loading,
            statusMessage,
            classificationLabels
        };
    },
});

app.mount("#app");