add info message

Author: jmarcosfer

examples/demos/common/AnalysisInfoMessage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="ui info small message" v-if="showInfo">
+    <i class="close icon" @click="closeInfo"></i>
+    <div class="header">
+      About analysis:
+    </div>
+    <p>We select 65% of the audio, evenly spaced throughout the track, for analysis to ensure efficient processing while maintaining accuracy.</p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const showInfo = ref(true);
+
+function closeInfo() {
+  showInfo.value = false;
+}
+</script>

examples/demos/mood-classifiers/src/MoodClassifier.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="ui container">
+    <AnalysisInfoMessage />
     <div id="file-select-area">
       <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none"/>
       <div id="file-drop-area"
@@ -64,6 +65,7 @@
 <script setup lang="js">
 import { computed, onMounted, useTemplateRef } from 'vue';
 import { useWaveformDisplay, useAnalysisResults, setupArousalValenceChart } from './moodClassifierComposables';
+import AnalysisInfoMessage from '../../common/AnalysisInfoMessage.vue';
 
 const classifiers = {
   danceability: { icon: '💃🏻', label: 'Danceability' },

examples/demos/tagging/src/TaggingDemo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="ui container" id="genre-tagging-container">
+    <AnalysisInfoMessage />
     <div id="file-select-area">
       <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none"/>
       <div id="file-drop-area"
@@ -52,6 +53,7 @@
 import { computed, useTemplateRef } from 'vue';
 import { useWaveformDisplay, useAnalysisResults } from './taggingComposables';
 import PredictionSet from './PredictionSet.vue';
+import AnalysisInfoMessage from '../../common/AnalysisInfoMessage.vue';
 
 const classifiers = {
   'genre_discogs': { label: 'Music style classification', urlName: 'Genre Discogs400', url: 'https://essentia.upf.edu/models.html#genre-discogs400' },