File size: 2,583 Bytes
1ab5b08 a2b2617 1ab5b08 a2b2617 1ab5b08 a2b2617 1ab5b08 a2b2617 1ab5b08 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
const { createApp, ref, onMounted, computed } = Vue;
import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";
const getRandomImageUrl = async () => {
const randomImageRequest = await fetch("https://source.unsplash.com/random/640x480")
return randomImageRequest.url
}
const getImageBuffer = async (imageUrl) => {
const imageRequest = await fetch(imageUrl)
const imageBuffer = await imageRequest.arrayBuffer()
return imageBuffer
}
const app = createApp({
setup() {
const token = ref(localStorage.getItem("token") || "");
const models = ref(["google/vit-base-patch16-224", "microsoft/resnet-50", "timm/mobilenetv3_large_100.ra_in1k"]);
const selectedModel = ref("");
const imageUrl = ref("");
const loading = ref(false);
const didErrorOccur = ref(false)
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 imageData = await getImageBuffer(imageUrl.value);
const result = await hf.imageClassification({
data: imageData,
model: selectedModel.value,
});
classificationLabels.value = result
loading.value = false;
} catch (e) {
console.error(e);
loading.value = false;
didErrorOccur.value = true
}
};
const reset = () => {
classificationLabels.value = []
didErrorOccur.value = false
}
const shuffle = async () => {
imageUrl.value = ""
reset()
imageUrl.value = await getRandomImageUrl()
};
onMounted(async () => {
const localStorageToken = localStorage.getItem("token")
if (localStorageToken) {
token.value = localStorageToken;
}
selectedModel.value = models.value[0]
imageUrl.value = await getRandomImageUrl()
});
return {
token,
run,
shuffle,
models,
selectedModel,
imageUrl,
loading,
statusMessage,
classificationLabels
};
},
});
app.mount("#generate-text-stream-app");
|