huggingfacejs/object-detection-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 Object Detection 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>Detect Objects In Random Unsplash Images</h1>14 <div class="grid grid-cols-2 gap-2">15 <div>16 <label for="hf-token">Hugging Face Token (optional but limited if absent)</label>17 <input18 id="hf-token"19 v-model="token"20 placeholder="HF-TOKEN"21 type="password"22 />23 </div>24 <div>25 <label for="model-select">Select a model</label>26 <select id="model-select" v-model="selectedModel">27 <option v-for="model in models" :value="model">{{ model }}</option>28 </select>29 </div>30 </div>31 <div class="grid grid-cols-2 gap-2">32 <button class="btn-info" @click="shuffle">RANDOM IMAGE</button>33 <button class="btn-success" @click="run">DETECT OBJECTS</button>34 </div>35 <h2>{{statusMessage}}</h2>36 <div class="image-container">37 <div id="image-wrapper">38 <img :src="imageUrl" id="current-image" />39 </div>40 </div>41 </div>42 <script type="module" src="./index.js"></script>43 </body>44</html>45