| 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"); | |