huggingfacejs/image-classification-vue
0
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width" />6 <title>Image Classification Vue - HuggingFace.js Live Examples</title>7 <link rel="stylesheet" href="pico.classless.min.css" />8 <link rel="stylesheet" href="main.css" />9 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>10 </head>11 <body>12 <div id="generate-text-stream-app" class="container">13 <h1>Classifying Random Unsplash Images</h1>14 <div class="grid grid-cols-2 gap-2">15 <div>16 <label for="hf-token"17 >Hugging Face Token (optional but limited if absent)</label18 >19 <input20 id="hf-token"21 v-model="token"22 placeholder="HF-TOKEN"23 type="password"24 />25 </div>26 <div>27 <label for="model-select">Select a model</label>28 <select id="model-select" v-model="selectedModel">29 <option v-for="model in models" :value="model">{{ model }}</option>30 </select>31 </div>32 </div>33 <div class="grid grid-cols-2 gap-2">34 <button class="btn-info" @click="shuffle">RANDOM IMAGE</button>35 <button class="btn-success" @click="run">CLASSIFY</button>36 </div>37 <h3>{{statusMessage}}</h3>38 <div class="grid grid-cols-2 gap-2">39 <div class="image-container">40 <div id="image-wrapper">41 <img :src="imageUrl" id="current-image" />42 </div>43 </div>44 <table v-if="classificationLabels.length > 0">45 <thead>46 <tr>47 <th>Label</th>48 <th>Score</th>49 </tr>50 </thead>51 <tbody>52 <tr53 v-for="classificationLabel in classificationLabels"54 :key="classificationLabel.label"55 >56 <td>{{classificationLabel.label}}</td>57 <td>{{Math.floor(classificationLabel.score * 100, 2)}}%</td>58 </tr>59 </tbody>60 </table>61 </div>62 </div>63 <script type="module" src="./index.js"></script>64 </body>65</html>66