huggingfacejs/audio-classification-vue
2
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width" />6 <title>Audio 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="app" class="container">13 <h1>Audio Classification</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 <div>35 <label for="audio-select">Select an audio (Credits: Daniel Simion - SoundBible)</label>36 <select id="audio-select" v-model="selectedAudio">37 <option v-for="audioFile in audioFiles" :value="audioFile">38 {{ audioFile }}39 </option>40 </select>41 </div>42 <div>43 <label id="audio-label">Audio Player</label>44 <audio id="audio" controls :src="`sounds/${selectedAudio}`"></audio>45 </div>46 </div>47 <button class="btn-success" @click="run">CLASSIFY</button>48 <h3>{{statusMessage}}</h3>49 <table v-if="classificationLabels.length > 0">50 <thead>51 <tr>52 <th>Label</th>53 <th>Score</th>54 </tr>55 </thead>56 <tbody>57 <tr58 v-for="classificationLabel in classificationLabels"59 :key="classificationLabel.label"60 >61 <td>{{classificationLabel.label}}</td>62 <td>{{Math.floor(classificationLabel.score * 100, 2)}}%</td>63 </tr>64 </tbody>65 </table>66 </div>67 <script type="module" src="./index.js"></script>68 </body>69</html>70