Feat: Add block of color

app.py

@@ -4,7 +4,8 @@ import os
 import gradio as gr
 from pathlib import Path
 from huggingface_hub import login
-
+from mutagen.mp3 import MP3
+from mutagen.wave import WAVE
 css = """#myProgress {
   width: 100%;
   background-color: var(--block-border-color);
@@ -62,48 +63,51 @@ css = """#myProgress {
 
 
 js_progress_bar = """
-    function move(current_index, n_ann, total_ann) {
-
-    var elem = document.getElementById("myBar");
-    elem.style.width = n_ann/total_ann * 100 + "%";
-    progressText.innerText = `${current_index} / ${total_ann} (Completed: ${n_ann})`;
-    const waveform = document.querySelector('#waveform div');
-    const shadowRoot = waveform.shadowRoot;
-    const canvases = shadowRoot.querySelector('.wrapper');
-
-    console.log(canvases.offsetWidth)
-
-    const leftOffsetPct = 0.5;
-    const widthPct = 0.5;
-    
-
-    // Create a style element for the shadow DOM
-    const style = document.createElement('style');
-    style.textContent = `
-    .wrapper::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: ${canvases.offsetWidth * leftOffsetPct}px;
-        width: ${canvases.offsetWidth * widthPct}px;
-        height: 100%;
-        background-color: blue;
-        z-index: 999;
-        opacity: 0.5;
-    }
-
-    /* Ensure parent has positioning context */
-    .wrapper {
-        position: relative;
-    }
-    `;
-
-    // Append the style to the shadow root
-    shadowRoot.appendChild(style);
+    function move(start, end, total_duration, current_index, n_ann, total_ann) {
 
-    console.log('Added pseudo-element to canvases');
+        var elem = document.getElementById("myBar");
+        elem.style.width = n_ann/total_ann * 100 + "%";
+        progressText.innerText = `${current_index} / ${total_ann} (Completed: ${n_ann})`;
+        
+        const waveform = document.querySelector('#audio_to_annotate #waveform div');
+        const shadowRoot = waveform.shadowRoot;
+        const canvases = shadowRoot.querySelector('.wrapper');
 
+        console.log(canvases.offsetWidth)
 
+        const leftOffsetPct = start / total_duration;
+        const widthPct = (end - start) / total_duration;
+        
+        // Get CSS variable for background color
+        const blockColor = getComputedStyle(document.documentElement)
+            .getPropertyValue('--block-title-background-fill')
+            .trim() || 'red'; // Default to red if variable is not found
+
+        // Create a style element for the shadow DOM
+        const style = document.createElement('style');
+        style.textContent = `
+        .wrapper::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: ${canvases.offsetWidth * leftOffsetPct}px;
+            width: ${canvases.offsetWidth * widthPct}px;
+            height: 100%;
+            background-color: blue;
+            z-index: 999;
+            opacity: 0.5;
+        }
+
+        /* Ensure parent has positioning context */
+        .wrapper {
+            position: relative;
+        }
+        `;
+
+        // Append the style to the shadow root
+        shadowRoot.appendChild(style);
+
+        console.log(start + ' ' + end + ' ' + total_duration);
     }
     """
 
@@ -211,6 +215,7 @@ persistent_storage = Path('/data')
 # List of all audio files to annotate
 global file_list
 global total_annotations 
+
 # Initialize an empty DataFrame to store annotations
 annotations = pd.DataFrame(columns=['sample_id', 'sentence', 'emotion', 'confidence', 'comments'])
 
@@ -223,6 +228,18 @@ possible_ids = {'Tiger-001': 0, 'Panda-002': 0,
                 'Zebra-009': 4, 'Lion-010': 4,
                 'Cheetah-011': 5, 'Bear-012': 5}
 
+
+
+def get_audio_duration(file_path):
+    if file_path.lower().endswith('.mp3'):
+        audio = MP3(file_path)
+    elif file_path.lower().endswith(('.wav', '.wave')):
+        audio = WAVE(file_path)
+    else:
+        raise ValueError("Unsupported file format")
+    
+    return audio.info.length  # Duration in seconds
+
 def get_storage(password):
     #source: https://discuss.huggingface.co/t/accessing-data-folder-of-persistent-storage/46681/2
     if password == password_files:
@@ -273,8 +290,12 @@ def load_example(index):
         annotations.iloc[index].to_dict() if index < len(annotations) else {"sample_id": row["sample_id"], "emotion": 'Blank', "confidence": 0,
                                                                             "comments": ''}
     )
-    
-    return (sentence, audio_path, previous_annotation['emotion'], previous_annotation['confidence'], previous_annotation["comments"])
+
+    start = row['start']
+    end = row['end']
+    duration = get_audio_duration(audio_path)
+    print(f'{start} {end} {duration}')
+    return (sentence, audio_path, previous_annotation['emotion'], previous_annotation['confidence'], previous_annotation["comments"], start, end, duration)
 
 
 def save_annotation(emotions, confidence, comments, participant_id, ann_completed, current_index):
@@ -329,7 +350,7 @@ def deactivate_participant_id(participant_id, lets_go, total, previous_button, n
         total = gr.Number(total_annotations, visible=False)
 
 
-        sentence, audio_player, emotions, confidence, comments, ann_completed, current_index = load_first_example(participant_id, ann_completed, current_index)
+        sentence, audio_player, emotions, confidence, comments, start, end, duration, ann_completed, current_index = load_first_example(participant_id, ann_completed, current_index)
         
         participant_id = gr.Textbox(label='What is your participant ID?', value = participant_id, interactive = False)
         lets_go = gr.Button("Participant selected!", interactive = False)
@@ -341,7 +362,7 @@ def deactivate_participant_id(participant_id, lets_go, total, previous_button, n
 
     else:
         gr.Warning("Please insert a valid participant ID")
-    return participant_id, lets_go, total, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, ann_completed, current_index
+    return participant_id, lets_go, total, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, start, end, duration, ann_completed, current_index
 
 # ===================
 # Gradio Interface
@@ -384,6 +405,9 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         ann_completed = gr.Number(0, visible=False)
         total = gr.Number(0, visible=False)
         current_index = gr.Number(0, visible = False)
+        start = gr.Number(0, visible = False)
+        end = gr.Number(0, visible = False)
+        duration = gr.Number(0, visible = False)
         # Row with progress bar
         
         gr.HTML("""
@@ -396,7 +420,7 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
     
         # Row with audio player
         with gr.Row():
-            audio_player = gr.Audio(value= 'test.mp3', label="Audio", type="filepath", interactive=False, show_download_button = False, show_share_button = False)
+            audio_player = gr.Audio(value= 'test.mp3', label="Audio", type="filepath", interactive=False, show_download_button = False, show_share_button = False, elem_id = "audio_to_annotate")
 
         # Hidden row with corresponding sentence
         with gr.Row():
@@ -423,17 +447,17 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         previous_button.click(
             previous_example,
             inputs=[emotions, confidence, comments, participant_id,  ann_completed, current_index],
-            outputs=[sentence_text, audio_player, emotions, confidence, comments, ann_completed, current_index],).then(None, [], [current_index,ann_completed, total], js = js_progress_bar)
+            outputs=[sentence_text, audio_player, emotions, confidence, comments, start, end, duration, ann_completed, current_index],).then(None, [], [start, end, duration, current_index,ann_completed, total], js = js_progress_bar)
 
         # Go to the next example
         next_button.click(
             next_example,
             inputs=[emotions, confidence, comments, participant_id, ann_completed, current_index],
-            outputs=[sentence_text, audio_player, emotions, confidence, comments, ann_completed, current_index ],).then(None, [], [current_index,ann_completed, total], js = js_progress_bar)
+            outputs=[sentence_text, audio_player, emotions, confidence, comments, start, end, duration, ann_completed, current_index],).then(None, [], [start, end, duration, current_index,ann_completed, total], js = js_progress_bar)
         
         buttons = [previous_button, next_button]
         data = [sentence_text, audio_player, emotions, confidence, comments]
-        lets_go.click(deactivate_participant_id, [participant_id, lets_go, total, *buttons, *data, ann_completed, current_index], [participant_id, lets_go, total, *buttons, *data, ann_completed, current_index]).then( None, [], [current_index, ann_completed, total], js = js_progress_bar)
+        lets_go.click(deactivate_participant_id, [participant_id, lets_go, total, *buttons, *data, ann_completed, current_index], [participant_id, lets_go, total, *buttons, *data, start, end, duration, ann_completed, current_index]).then( None, [], [start, end, duration, current_index, ann_completed, total], js = js_progress_bar)
         
     
     with gr.Tab("Access Files"):

requirements.txt

@@ -1 +1,2 @@
-openpyxl
+openpyxl
+mutagen