chore(labeler): add component for audio matches (#185)

finetuner/labeler/ui/index.html

@@ -44,6 +44,13 @@
                                 :submit-doc="submit_doc">
                             </image-match-card>
                         </swiper-slide>
+                        <swiper-slide v-if="labeler_config.style=='audio'" v-for="(doc, doc_idx) in cur_batch"
+                            :key="doc_idx">
+                            <audio-match-card :doc="doc" :doc-idx="doc_idx" :get-content="get_content"
+                                :toggle-relevance="toggle_relevance" :invert-selection="select_all"
+                                :submit-doc="submit_doc">
+                            </audio-match-card>
+                        </swiper-slide>
                         <swiper-slide v-if="labeler_config.style=='mesh'" v-for="(doc, doc_idx) in cur_batch"
                             :key="doc_idx">
                             <mesh-match-card :doc="doc" :doc-idx="doc_idx" :get-content="get_content"
@@ -74,6 +81,7 @@
     <script src="./js/components/sidebar.vue.js"></script>
     <script src="./js/components/image-match-card.vue.js"></script>
     <script src="./js/components/text-match-card.vue.js"></script>
+    <script src="./js/components/audio-match-card.vue.js"></script>
     <script src="./js/components/mesh-match-card.vue.js"></script>
     <script src="./js/main.js"></script>
 </body>

finetuner/labeler/ui/js/components/audio-match-card.vue.js

@@ -0,0 +1,56 @@
+const audioMatchCard = {
+    props: {
+      doc: Object,
+      docIdx: Number,
+      getContent: Function,
+      toggleRelevance: Function,
+      invertSelection: Function,
+      submitDoc: Function,
+    },
+    template: `
+        <div class="card mesh-card">
+            <div class="card-header flex-column">
+                <p class="fs-6 fw-light mb-2 p-2">Select all sounds similar to the following one</p>
+                <audio
+                    v-bind:src="getContent(doc)" 
+                    v-on:click="toggleRelevance(match)"
+                    class=""
+                    controls
+                    />
+                </model-viewer>
+            </div>
+            <div class="card-body">
+                <ul class="list-group">
+                    <li class="list-group-item" v-for="(match, matchIndex) in doc.matches">
+                        <div class="match-item" :class="{ 'positive-match': match.tags.finetuner_label }"
+                            style="width: 100%" v-on:click="toggleRelevance(match)">
+                            <audio
+                                v-bind:src="getContent(match)" 
+                                v-on:click="toggleRelevance(match)"
+                                class=""
+                                controls
+                                />
+                            <div class="kbd">{{matchIndex}}</div>
+                        </div>
+
+                    </li>
+                </ul>
+            </div>
+            <div class="card-footer">
+                <div class="btn-toolbar justify-content-between g-2">
+                    <button type="button" class="btn btn-outline-success"
+                            v-on:click="invertSelection(doc.matches)">
+                        Invert
+                        <div class="kbd">i</div>
+                    </button>
+                    <button type="button" class="btn btn-outline-primary" v-on:click="submitDoc(docIdx)">
+                        Done
+                        <div class="kbd">space</div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    `,
+    mounted() {
+    }
+}

finetuner/labeler/ui/js/main.js

@@ -7,6 +7,7 @@ const app = new Vue({
         "image-match-card": imageMatchCard,
         "text-match-card": textMatchCard,
         "mesh-match-card": meshMatchCard,
+        "audio-match-card": audioMatchCard,
     },
     data: {
         is_busy: false,
@@ -17,6 +18,7 @@ const app = new Vue({
                 {text: '.tags', value: 'tags'}],
             style: [{text: 'Image', value: 'image'},
                 {text: 'Text', value: 'text'},
+                {text: 'Audio', value: 'audio'},
                 {text: '3D mesh', value: 'mesh'}],
         },
         labeler_config: {

finetuner/labeler/ui/main.css

@@ -250,7 +250,7 @@ footer a {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
-    padding: 2px 2px;
+    padding: 6px 2px;
     max-height: 1em;
     font-family: monospace;
     min-width: 1em;
@@ -262,6 +262,10 @@ footer a {
     right: -10px;
 }
 
+.list-group-item .kbd {
+    position: relative;
+}
+
 .hint-text {
     max-width: 50%;
 }