Spaces:

arsalagrey
/

image-classfication-vue

Running

App Files Files Community

Arsala Grey commited on Oct 25, 2023

Commit

a2b2617

•

1 Parent(s): 1ab5b08

cleaned up and prepared demo

Browse files

Files changed (3) hide show

index.html +27 -12
index.js +4 -2
main.css +0 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <title>Image Object Detection Vue - HuggingFace.js Live Examples</title>
     <link rel="stylesheet" href="pico.classless.min.css" />
     <link rel="stylesheet" href="main.css" />
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
@@ -13,7 +13,9 @@
       <h1>Classifying Random Unsplash Images</h1>
       <div class="grid grid-cols-2 gap-2">
         <div>
-          <label for="hf-token">Hugging Face Token (optional but limited if absent)</label>
           <input
             id="hf-token"
             v-model="token"
@@ -32,17 +34,30 @@
         <button class="btn-info" @click="shuffle">RANDOM IMAGE</button>
         <button class="btn-success" @click="run">CLASSIFY</button>
       </div>
-      <h2>{{statusMessage}}</h2>
-      <div class="flex justify-between">
-        <div v-for="classificationLabel in classificationLabels" :key="classificationLabel.label">
-            <h4>{{classificationLabel.label}}</h4>
-            <p>{{Math.floor(classificationLabel.score * 100, 2)}}%</p>
-        </div>
-      </div>
-      <div class="image-container">
-        <div id="image-wrapper">
-          <img :src="imageUrl" id="current-image" />
         </div>
       </div>
     </div>
     <script type="module" src="./index.js"></script>

   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <title>Image Classification Vue - HuggingFace.js Live Examples</title>
     <link rel="stylesheet" href="pico.classless.min.css" />
     <link rel="stylesheet" href="main.css" />
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
       <h1>Classifying Random Unsplash Images</h1>
       <div class="grid grid-cols-2 gap-2">
         <div>
+          <label for="hf-token"
+            >Hugging Face Token (optional but limited if absent)</label
+          >
           <input
             id="hf-token"
             v-model="token"
         <button class="btn-info" @click="shuffle">RANDOM IMAGE</button>
         <button class="btn-success" @click="run">CLASSIFY</button>
       </div>
+      <h3>{{statusMessage}}</h3>
+      <div class="grid grid-cols-2 gap-2">
+        <div class="image-container">
+          <div id="image-wrapper">
+            <img :src="imageUrl" id="current-image" />
+          </div>
         </div>
+        <table v-if="classificationLabels.length > 0">
+          <thead>
+            <tr>
+              <th>Label</th>
+              <th>Score</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="classificationLabel in classificationLabels"
+              :key="classificationLabel.label"
+            >
+              <td>{{classificationLabel.label}}</td>
+              <td>{{Math.floor(classificationLabel.score * 100, 2)}}%</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
     <script type="module" src="./index.js"></script>

index.js CHANGED Viewed

@@ -14,7 +14,7 @@ const getImageBuffer = async (imageUrl) => {
 const app = createApp({
     setup() {
         const token = ref(localStorage.getItem("token") || "");
-        const models = ref(["google/vit-base-patch16-224"]);
         const selectedModel = ref("");
         const imageUrl = ref("");
         const loading = ref(false);
@@ -27,6 +27,7 @@ const app = createApp({
         })
         const run = async () => {
             loading.value = true;
             try {
                 const hf = new HfInference(token.value);
@@ -49,8 +50,9 @@ const app = createApp({
         }
         const shuffle = async () => {
-            imageUrl.value = await getRandomImageUrl()
             reset()
         };
         onMounted(async () => {

 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 run = async () => {
+            reset()
             loading.value = true;
             try {
                 const hf = new HfInference(token.value);
         }
         const shuffle = async () => {
+            imageUrl.value = ""
             reset()
+            imageUrl.value = await getRandomImageUrl()
         };
         onMounted(async () => {

main.css CHANGED Viewed

@@ -162,7 +162,6 @@ h1, h2, h3, h4, h5, h6 {
 .image-container {
   display: flex;
   justify-content: center;
-  padding: 2rem;
 }
 #detected-objects-container {

 .image-container {
   display: flex;
   justify-content: center;
 }
 #detected-objects-container {