Fix: fix states errors - allow multiple users to annotate at the same time

app.py

@@ -7,396 +7,24 @@ from huggingface_hub import login
 from mutagen.mp3 import MP3
 from mutagen.wave import WAVE
 import json
+from text_explanations import *
+from utils import *
+from load_and_save import *
 
-css = """#myProgress {
-  width: 100%;
-  background-color: var(--block-border-color);
-  border-radius: 2px;
-}
 
-  #myBar {
-    width: 0%;
-    height: 30px;
-    background-color: var(--block-title-background-fill);
-    border-radius: 2px;
-  } 
+def state_to_number(*state_obj_list):
 
-  #progressText {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%); 
-    color: var(--block-title-text-color); 
-    font-weight: regular; 
-    font-size: 14px;
-  }
+    list_numbers = []
+    for state_obj in state_obj_list:
+        number_obj = gr.Number(state_obj, visible = False)
+        list_numbers.append(number_obj)
+      
+    return list_numbers
 
-  h1, h2, h3, h4 {
-    padding: var(--block-title-padding);
-    color: var(--block-title-text-color);
-    border: solid var(--block-title-border-width) var(--block-title-border-color);
-    border-radius: var(--block-title-radius);
-    background: var(--block-title-background-fill);
-    width: fit-content;
-    display: inline-block;
-  }
 
-  h4 {
-    margin: 0px;
-    color: var(--block-title-background-fill);
-    background: var(--block-title-text-color);
-  }
-
-  #instructions {
-    max-width: 980px;
-    align-self: center;
-  }
-
-  .content-box {
-    border-color: var(--block-border-color);
-    border-radius: var(--block-radius);
-    background: var(--block-background-fill);
-    padding: var(--block-label-padding);
-  }
-
-
-"""
-
-
-
-js_progress_bar = """
-    function move(start, end, total_duration, 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('#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);
-    }
-    """
-
-
-
-
-intro_html = """
-
-<h1>Emotionality in Speech</h1>
-<div class="content-box">
-
-    <p>Spoken language communicates more than just words. Speakers use tone, pitch, and other nonverbal cues to express emotions. In emotional speech, these cues can strengthen or even contradict the meaning of the words—for example, irony can make a positive phrase sound sarcastic. For this research, we will focus on three basic emotions plus neutral:</p>
-
-    <ul>
-    <li><h4>Anger</h4></li>
-    <li><h4>Happiness</h4></li>
-    <li><h4>Sadness</h4></li>
-    <li><h4>Neutral</h4></li>
-    </ul>
-
-    <p>This may seem like a small set, but it's a great starting point for analyzing emotions in such a large collection— <strong>303 hours of interviews! (That’s 13 days of nonstop listening! &#128558)</strong> </p>
-</div>
-
-<h2>The ACT-UP Oral History Project</h2>
-
-<div class="content-box">
-    <p>You will be annotating short audio clips extracted from the ACT UP (AIDS Coalition to Unleash Power) Oral History Project developed by Sarah Schulman and Jim Hubbard . 
-    This archive features interviews with individuals who were part of ACT UP during the late 1980s and early 1990s, amidst the AIDS epidemic. 
-    In each video, the subjects talk about their life before the epidemic, how they were affected by AIDS and their work in ACT UP.</p>
-</div>
-
-<h2>What will you be annotating?</h2>
-<div class="content-box">
-    <p>You will annotate one emotion per short audio clip, based on the following criteria:</p>
-
-    <ul>
-        <li>
-            <h4>Predominant Emotion:</h4> 
-            The emotion expressed with the highest intensity. Emotions can be complex, and multiple emotions may occur at the same time.
-        </li>
-        
-        <li>
-            <h4>Perceived Emotion at the Time of Recording:</h4> 
-            In Oral History Archives, interviewees discuss their past. However, you should annotate the emotion they appear to feel at the time of recording, NOT what they felt during the event they describe.
-        </li>
-        
-        <li>
-            <h4>Speech Emotionality:</h4> 
-            Focus on how something is said rather than what is said. For example, if a friend recounts an awful day with humor, the content may be sad, but the delivery is joyful. In this case, linguistic emotionality (content) would be classified as sad, while paralinguistic emotionality (tone and delivery) would be classified as joyful.
-        </li>
-    </ul>
-
-    <div style="text-align: center; padding: 1.5em 0;">
-        <strong>If you're uncertain about which emotion you are hearing, open the sidebar by clicking the arrow in the upper left corner. There, you'll find a list of major emotions grouped under each category!</strong>
-    </div>
-</div>
-"""
-
-examples_explanation = """<h3>Audio examples</h3>
-    <div class="content-box">
-        <p>Let's check out examples for the four emotions to annotate. Note that all these examples use the same sentence and are acted out, making the emotionality in speech more apparent. In a real-world setting, emotionality is more complex, so you will find a list of additional emotions within each of the three emotion categories (Happy, Sad, and Angry) to assist you during annotation.</p>
-    </div>"""
-side_bar_html = """
-<h3>Major subclasses</h3>
-<div class="content-box">
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
-        <span>&#128578;</span>
-        <h4 style="margin: 0;">Happiness</h4>
-
-    </div>
-    
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
-        <p>Affection, Goodwill, Joy, Satisfaction, Zest, Acceptance, Pride, Hope, Excitement, Relief, Passion, Caring</p>
-    </div>
-
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
-        <span>&#128577;</span>
-        <h4 style="margin: 0;">Sadness</h4>
-    </div>
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
-        <p>Suffering, Regret, Displeasure, Embarrassment, Sympathy, Depression</p>
-    </div>
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
-        <span>&#128545;</span>
-        <h4 style="margin: 0;">Anger</h4>
-    </div>
-    <div>
-        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
-        <p>Irritability, Torment, Jealousy, Disgust, Rage, Frustration</p>
-        <p></p>
-    </div>
-</div>
-
-"""
-
-start_annotating = """<h2>How to use the annotation interface?</h2>
-<div class="content-box">
-    <ol>
-        <li>
-            Open the sidebar by clicking the arrow in the upper left corner.
-        </li>
-        <li>
-            Enter the participant ID you received via email.
-        </li>
-        <li>
-            Click <strong>"Let's go!"</strong> — this will lock your participant ID.
-        </li>
-        <li>
-            You’ll be directed to the annotation interface. The task will resume where you left off (on the last example you annotated), or start from the first audio if this is your first session.
-        </li>
-        <li>
-            When you finish all annotations, please send an email to <a href="mailto:f.pessanha@uu.nl">f.pessanha@uu.nl</a>.
-        </li>
-    </ol>
-    <p><strong>Note:</strong> You can click on any part of the audio to start playing from that point. Please avoid clicking on the audio while it is playing (pause it first). This will not affect the program, but it will help us understand how you interact with the interface.</p>
-    <div style="text-align: center; padding: 1.5em 0;">
-        <p><strong>Below you can find an overview of the annotation interface.</strong></p>
-    </div>
-
-</div>"""
-
-persistent_storage = Path('/data')
-
-password_files = os.getenv("password_files")
-
-
-possible_ids = {'Tiger-001': 0, 'Falcon-002': 0, 
-                'Elephant-003': 1, 'Panther-004': 1,
-                'Zebra-005': 2, 'Wolf-006': 2,
-                'Koala-007': 3, 'Otter-008': 3,
-                'Leopard-009': 4, 'Panda-010': 4,
-                'Cheetah-011': 5, 'Gorilla-012': 5,
-                'Dolphin-013' : 6, 'Lynx-014': 6,
-                'Moose-015': 7, 'Raccoon-016': 7}
-
-#possible_ids = json.load(os.getenv("possible_ids"))
-
-
-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):
-    # Check if the password is correct
-    if password == password_files:
-        # Get the list of file paths and calculate the total usage
-        files = [
-            file for file in persistent_storage.glob("**/*.csv") if file.is_file()
-        ]
-        
-        # Calculate total usage (in bytes)
-        usage = sum([file.stat().st_size for file in files])
-        
-        # Convert file paths to strings for Gradio's File component
-        file_paths = [str(file.resolve()) for file in files]
-        
-        # Return the file paths (as strings) and the total usage in GB
-        return file_paths, f"{usage / (1024.0 ** 3):.3f}GB"
-    
-    else:
-        return gr.Warning("Please provide the correct password"), None
-
-
-def load_first_example(annotations_df, file_list_df, participant_id, ann_completed, current_index):
-    """ Loads and first example and updates index"""
-    path_ann = f'{persistent_storage}/{participant_id}_annotations.csv'
-    print(path_ann)
-    if os.path.exists(path_ann):
-        annotations_df = pd.read_csv(path_ann, keep_default_na=False)
-
-        current_index = len(annotations_df)
-        print('path was found')
-   
-        ann_completed = gr.Number(len(annotations_df) - 1, visible=False)
-
-    else: 
-        # Initialize an empty DataFrame to store annotations
-        annotations_df = pd.DataFrame(columns=['sample_id', 'sentence', 'emotion', 'confidence', 'comments', 'n_clicks'])
-
-    return annotations_df, *load_example(annotations_df, file_list_df, current_index), ann_completed, current_index
-    
-def load_example(annotations_df, file_list_df, index):
-    """Loads the example in row #index from dataframe file_list. 
-    If there are any annotations it will give those values to the annotation dataframe"""
-    
-    row = file_list_df.iloc[index]
-    audio_path = os.path.join(persistent_storage, 'files_to_annotate_2round', row["sample_id"].split('-')[0], row["sample_id"] + '.wav')
-    sentence = row["sentence"]
-
-    # If the user already made an annotation for this example, gradio will return said annotation
-    previous_annotation = (
-        annotations_df.iloc[index].to_dict() if index < len(annotations) else {"sample_id": row["sample_id"], "emotion": 'Blank', "confidence": 'Blank',
-                                                                            "comments": '', "n_clicks": 0}
-    )
-
-    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"], n_clicks, start, end, duration
-
-
-def save_annotation(annotations_df, file_list_df, emotions, confidence, comments, n_clicks, participant_id, ann_completed, current_index):
-    """Save the annotation for the current example."""
-
-    row = file_list.iloc[current_index]
-    sample_id = row["sample_id"]
-    sentence = row["sentence"]
-
-    # Update or append annotation
-    if sample_id in annotations_df["sample_id"].values:
-        annotations_df.loc[annotations_df["sample_id"] == sample_id, ["emotion", "confidence", "comments", "n_clicks"]] = \
-            [emotions, confidence, comments, n_clicks]
-    else:
-        annotations_df.loc[len(annotations_df)] = [sample_id, sentence, emotions, confidence, comments, n_clicks]
-        ann_completed = gr.Number(ann_completed + 1, visible=False)
-    annotations_df.to_csv(f"{persistent_storage}/{participant_id}_annotations.csv", index=False)  # Save to a CSV file
-    
-    return annotations_df, ann_completed
-
-def next_example(annotations_df, file_list_df, emotions, confidence, comments, n_clicks, participant_id, ann_completed, current_index):
-    """Move to the next example."""
-
-    if emotions == "Blank":
-        gr.Warning("Please fill out the emotion section. 'Blank' is not a valid emotion.")
-    elif confidence == "Blank":
-        gr.Warning("Please fill out the confidence section. 'Blank' is not a valid input.")
-
-    else:  
-        annotations_df, ann_completed = save_annotation(annotations_df, file_list_df, emotions, confidence, comments, n_clicks, participant_id, ann_completed, current_index)
-        if current_index < len(file_list_df) - 1:
-            current_index += 1
-    return annotations_df, *load_example(annotations_df, file_list_df, current_index), ann_completed, current_index
-
-def previous_example(annotations_df, file_list_df, emotion, confidence, comments, n_clicks, participant_id,  ann_completed, current_index):
-    """Move to the previous example."""
-  
-    if emotion != "Blank":
-        annotations_df, ann_completed = save_annotation(annotations_df, file_list_df, emotion, confidence, comments, n_clicks, participant_id,  ann_completed, current_index)
-    if current_index > 0:
-        current_index -= 1
-            
-    return annotations_df, *load_example(annotations_df, file_list_df, current_index), ann_completed, current_index
-
-def deactivate_participant_id(annotations_df, file_list_df, total_annotations, participant_id, lets_go, total, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, n_clicks, ann_completed, current_index):
-    print(possible_ids.keys())
-    if participant_id in possible_ids.keys():
-        file_list_df = pd.read_csv(os.path.join(persistent_storage, 'files_to_annotate_2round', f'group_{possible_ids[participant_id]}_v2.csv'), keep_default_na=False)
-
-          
-        total_annotations = len(file_list_df)
-        total = gr.Number(total_annotations, visible=False)
-        
-
-        annotations_df, sentence, audio_player, emotions, confidence, comments, n_clicks, start, end, duration, ann_completed, current_index = load_first_example(annotations_df, file_list_df, participant_id, ann_completed, current_index)
-        print(sentence)
-        print(start, end, duration)
-        participant_id = gr.Textbox(label='What is your participant ID?', value = participant_id, interactive = False)
-        lets_go = gr.Button("Participant selected!", interactive = False)
-        
-        sentence_text = gr.Textbox(label="Transcription", interactive=False, value = sentence)
-        emotions = gr.Radio(["Blank", "Happy", "Sad", "Angry", "Neutral"], label="Predominant Emotion (Check the sidebar for major subclasses)", value =  emotions, visible = True)
-        confidence = gr.Radio(["Blank","Very Uncertain", "Somewhat Uncertain", "Neutral", "Somewhat confident", "Very confident"], label="How confident are you that the annotated emotion is present in the recording?", visible = True, value = confidence)
-        comments = gr.Textbox(label="Comments", visible =True, value = comments)
-        previous_button = gr.Button("Previous Example", visible = True)
-        next_button = gr.Button("Next Example",visible = True)
-        
-        return annotations_df, file_list_df, participant_id, lets_go, total, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, n_clicks, start, end, duration, ann_completed, current_index
-
-    else:
-        raise gr.Error("Please insert a valid participant ID")
-    
-def count_clicks(n_clicks):
-    n_clicks = gr.Number(n_clicks + 1, visible = False)
-
-    return n_clicks
 # ===================
 # Gradio Interface
 # ===================
-
-
 with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
     # List of all audio files to annotate
 
@@ -407,8 +35,7 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         participant_id = gr.Textbox(label='What is your participant ID?', interactive = True)
         lets_go = gr.Button("Let's go!")
         cheat_sheet = gr.HTML(side_bar_html, padding = False)
-        #happy_words = gr.Textbox(label = "Happy")
-
+        
     with gr.Tab("Instructions", elem_id = 'instructions'):
         instructions = gr.HTML(intro_html, padding = False)
         
@@ -430,20 +57,28 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
                 angry_audio = gr.Audio(value=f'{persistent_storage}/emotion_examples/angry_low.wav', label = "Anger (Low Intensity)")
                 angry_int_audio = gr.Audio(value=f'{persistent_storage}/emotion_examples/angry_intense.wav', label = "Anger (High Intensity)")
 
-            #agreement = gr.Checkbox(value = False, label = "I agree", info = "I agree to have my annotations, comments, and questionnaire answers used for research purposes. I understand that any personal information will be anonymized.", interactive = True)
-
         instructions = gr.HTML(start_annotating, padding = False)
         image = gr.Image(label = "Annotation Interface", value = f"{persistent_storage}/instructions_annotation.png", container = False, type = "filepath", show_label = False, show_download_button = False, show_fullscreen_button = False,show_share_button = False)
         
     
     with gr.Tab("Annotation Interface"):
         ann_completed = gr.State(0)
+        ann_completed_temp = gr.Number(0, visible = False)
         total = gr.State(0)
+        total_temp = gr.Number(0, visible = False)
         current_index = gr.State(0)
-        start = gr.State(0)
-        end = gr.State(0)
-        duration = gr.State(0)
+        current_index_temp = gr.Number(0, visible = False)
+        start = gr.State(0.0)
+        start_temp = gr.Number(0, visible = False)
+        end = gr.State(0.0)
+        end_temp = gr.Number(0, visible = False)
+        duration = gr.State(0.0)
+        duration_temp = gr.Number(0, visible = False)
         n_clicks = gr.State(0)
+
+        part_id = gr.State('')
+
+
         annotations = gr.State(pd.DataFrame())
         file_list = gr.State(pd.DataFrame())
 
@@ -486,21 +121,39 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         # Go back
         previous_button.click(
             previous_example,
-            inputs=[annotations, file_list, emotions, confidence, comments, n_clicks, participant_id,  ann_completed, current_index],
-            outputs=[annotations, sentence_text, audio_player, emotions, confidence, comments, n_clicks, start, end, duration, ann_completed, current_index],).then(None, [], [start, end, duration, current_index,ann_completed, total], js = js_progress_bar)
+            inputs=[annotations, file_list, emotions, confidence, comments, n_clicks, participant_id,  ann_completed , current_index],
+            outputs=[annotations, sentence_text, audio_player, emotions, confidence, comments, n_clicks, start, end, duration, 
+            ann_completed, current_index],).then(state_to_number, [start, end, duration, current_index, ann_completed, total], 
+            [start_temp, end_temp, duration_temp, current_index_temp, ann_completed_temp, total_temp]).then(None, [], 
+            [start_temp, end_temp, duration_temp, current_index_temp, 
+            ann_completed_temp, total_temp], js = js_progress_bar)
 
         # Go to the next example
         next_button.click(
             next_example,
             inputs=[annotations, file_list,emotions, confidence, comments, n_clicks, participant_id, ann_completed, current_index],
-            outputs=[annotations,sentence_text, audio_player, emotions, confidence, comments, n_clicks, start, end, duration, ann_completed, current_index],).then(None, [], [start, end, duration, current_index,ann_completed, total], js = js_progress_bar)
+            outputs=[annotations,sentence_text, audio_player, emotions, confidence, comments, n_clicks, start, end, duration, ann_completed, 
+            current_index],).then(state_to_number, start, []).then(state_to_number, [start, end, duration, current_index, ann_completed, total], 
+            [start_temp, end_temp, duration_temp, current_index_temp, ann_completed_temp, total_temp]).then(None, [], 
+            [start_temp, end_temp, duration_temp, current_index_temp, 
+            ann_completed_temp, total_temp], js = js_progress_bar)
+            
+      
         
         buttons = [previous_button, next_button]
         data = [sentence_text, audio_player, emotions, confidence, comments]
-        lets_go.click(deactivate_participant_id, [annotations, file_list,  total, participant_id, lets_go, *buttons, *data, n_clicks, ann_completed, current_index], [annotations, file_list, participant_id, lets_go, total, *buttons, *data, n_clicks, start, end, duration, ann_completed, current_index]).then( None, [], [start, end, duration, current_index, ann_completed, total], js = js_progress_bar)
+        
+        lets_go.click(deactivate_participant_id, [annotations, file_list,  total, participant_id, 
+        lets_go, *buttons, *data, n_clicks, ann_completed, current_index], 
+        [annotations, file_list, participant_id, part_id, lets_go, total, *buttons, 
+        *data, n_clicks, start, end, duration, ann_completed, current_index]).then(state_to_number, [start, end, duration, current_index, ann_completed, total], 
+        [start_temp, end_temp, duration_temp, current_index_temp, ann_completed_temp, total_temp]).then(None, [], 
+        [start_temp, end_temp, duration_temp, current_index_temp, 
+        ann_completed_temp, total_temp], js = js_progress_bar)
+
         audio_player.play(count_clicks, [n_clicks], [n_clicks])
 
-        sidebar.collapse(None, [], [start, end, duration, current_index,ann_completed, total], js = js_progress_bar)
+        sidebar.collapse(None, [], [start, end, duration, current_index, ann_completed, total], js = js_progress_bar)
         sidebar.expand(None, [], [start, end, duration, current_index,ann_completed, total], js = js_progress_bar)
         
     

load_and_save.py

@@ -0,0 +1,233 @@
+import gradio as gr
+import pandas as pd
+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
+import json
+from text_explanations import *
+from utils import *
+
+possible_ids = {'Tiger-001': 0, 'Falcon-002': 0, 
+                'Elephant-003': 1, 'Panther-004': 1,
+                'Zebra-005': 2, 'Wolf-006': 2,
+                'Koala-007': 3, 'Otter-008': 3,
+                'Leopard-009': 4, 'Panda-010': 4,
+                'Cheetah-011': 5, 'Gorilla-012': 5,
+                'Dolphin-013' : 6, 'Lynx-014': 6,
+                'Moose-015': 7, 'Raccoon-016': 7}
+
+persistent_storage = Path('/data')
+password_files = os.getenv("password_files")
+
+def load_first_example(annotations_df, file_list_df, id, completed, index):
+    """ Loads and first example and updates index
+    
+    Parameters:
+    * annotations_df: annotation file
+    * file_list_df: files to annotate
+    * id: participant ID
+    * completed: number of examples annotated
+    * index: current index (in the files to annotate list)
+
+    return:
+    * annotations_df: dataframe with current annotations
+    * load_example: current example to annotate
+    * completed: updated number of completed annotations
+    * index: updated current index
+
+    """
+    path_ann = f'{persistent_storage}/{id}_annotations.csv'
+
+    if os.path.exists(path_ann):
+        annotations_df = pd.read_csv(path_ann, keep_default_na=False)
+        index = len(annotations_df)
+        completed = len(annotations_df) - 1 # update how many examples were completed
+
+    else: 
+        # Initialize an empty DataFrame to store annotations
+        annotations_df = pd.DataFrame(columns=['sample_id', 'sentence', 'emotion', 'confidence', 'comments', 'n_clicks'])
+
+    return annotations_df, *load_example(annotations_df, file_list_df, index), completed, index
+
+
+def load_example(annotations_df, file_list_df, index):
+    """Loads the example in row #index from dataframe file_list. 
+    If there are any annotations it will give those values to the annotation dataframe
+    
+    Parameters:
+    * annotations_df: dataframe with current annotations
+    * index: current index
+    
+    
+    Returns:
+    * sentence: current sentence
+    * audio_path: current_audio path
+    * ann['emotion']: current emotion
+    * ann['confidence']: current confidence
+    * ann['comments']: current comments
+    * ann['n_clicks']: current number of clicks
+    * start: current start
+    * end: current end
+    * duration: current sentence duration
+    
+    """
+
+    row = file_list_df.iloc[index]
+    audio_path = os.path.join(persistent_storage, 'files_to_annotate_2round', row["sample_id"].split('-')[0], row["sample_id"] + '.wav')
+    sentence = row["sentence"]
+
+    # If the user already made an annotation for this example, gradio will return said annotation
+    ann = (
+        annotations_df.iloc[index].to_dict() if index < len(annotations_df) else {"sample_id": row["sample_id"], "emotion": 'Blank', "confidence": 'Blank',
+                                                                            "comments": '', "n_clicks": 0}
+    )
+
+    start = row['start']
+    end = row['end']
+    duration = get_audio_duration(audio_path)
+    print(f'start/end/duration (load example) - {start} {end} {duration}')
+    return sentence, audio_path, ann['emotion'], ann['confidence'], ann["comments"], ann['n_clicks'], start, end, duration
+
+
+def save_annotation(annotations_df, file_list_df, emotions, confidence, comments, n_clicks, participant_id, ann_completed, current_index):
+    """Save the annotation for the current example.
+    
+    Parameters:
+    * annotations_df: dataframe with all annotations so far
+    * file_list_df: list of files to annotate
+    * emotions, confidence, comments, n_clicks: annotations to save
+    * participant_id: to indicate where to save the annotations
+    * ann_completed: number of annotations completed
+    * current_index: current index
+    
+    Return:
+    * annotations_df: updated annotations_df
+    * ann_completed: updated number of annotations completed
+    """
+
+    row = file_list_df.iloc[current_index]
+    sample_id = row["sample_id"]
+    sentence = row["sentence"]
+
+    # Update or append annotation
+    if sample_id in annotations_df["sample_id"].values:
+        annotations_df.loc[annotations_df["sample_id"] == sample_id, ["emotion", "confidence", "comments", "n_clicks"]] = \
+            [emotions, confidence, comments, n_clicks]
+    else:
+        annotations_df.loc[len(annotations_df)] = [sample_id, sentence, emotions, confidence, comments, n_clicks]
+        ann_completed += 1
+    annotations_df.to_csv(f"{persistent_storage}/{participant_id}_annotations.csv", index=False)  # Save to a CSV file
+    
+    return annotations_df, ann_completed
+
+def next_example(annotations_df, file_list_df, emotions, confidence, comments, n_clicks, participant_id, ann_completed, current_index):
+    """Move to the next example.
+
+    Parameters:
+    * annotations_df: current annotation dataframe
+    * file_list_df: all files to annotate
+    * emotions, confidence, comments, n_clicks: annotations to save
+    * participant_id: to indicate where to save the annotations
+    * ann_completed: number of annotations completed
+    * current_index: current index
+
+    Return:
+    * annotations_df: updated annotations_df
+    
+    
+    * sentence: current sentence
+    * audio_path: current_audio path
+    * ann['emotion']: current emotion
+    * ann['confidence']: current confidence
+    * ann['comments']: current comments
+    * ann['n_clicks']: current number of clicks
+    * start: current start
+    * end: current end
+    * duration: current sentence duration
+
+    * ann_completed: updated number of annotations completed
+    * current_index: current index
+
+    """
+
+    if emotions == "Blank":
+        gr.Warning("Please fill out the emotion section. 'Blank' is not a valid emotion.")
+    elif confidence == "Blank":
+        gr.Warning("Please fill out the confidence section. 'Blank' is not a valid input.")
+
+    else:  
+        annotations_df, ann_completed = save_annotation(annotations_df, file_list_df, emotions, confidence, comments, n_clicks, participant_id, ann_completed, current_index)
+        if current_index < len(file_list_df) - 1:
+            current_index += 1
+
+        sentence, audio_path, emotions, confidence, comments, clicks, start, end, duration = load_example(annotations_df, file_list_df, current_index)
+        print(f'start/end/duration (next) {start}, {end}, {duration}')
+    
+    return annotations_df, sentence, audio_path, emotions, confidence, comments, clicks, gr.State(start), gr.State(end), gr.State(duration), ann_completed, current_index
+
+def previous_example(annotations_df, file_list_df, emotion, confidence, comments, n_clicks, participant_id,  ann_completed, current_index):
+
+    """Move to the previous example.
+
+    Parameters:
+    * annotations_df: current annotation dataframe
+    * file_list_df: all files to annotate
+    * emotions, confidence, comments, n_clicks: annotations to save
+    * participant_id: to indicate where to save the annotations
+    * ann_completed: number of annotations completed
+    * current_index: current index
+
+    Return:
+    * annotations_df: updated annotations_df
+    
+    
+    * sentence: current sentence
+    * audio_path: current_audio path
+    * ann['emotion']: current emotion
+    * ann['confidence']: current confidence
+    * ann['comments']: current comments
+    * ann['n_clicks']: current number of clicks
+    * start: current start
+    * end: current end
+    * duration: current sentence duration
+
+    * ann_completed: updated number of annotations completed
+    * current_index: current index
+    """
+
+    if emotion != "Blank":
+        annotations_df, ann_completed = save_annotation(annotations_df, file_list_df, emotion, confidence, comments, n_clicks, participant_id,  ann_completed, current_index)
+    if current_index > 0:
+        current_index -= 1
+            
+    return annotations_df, *load_example(annotations_df, file_list_df, current_index), ann_completed, current_index
+
+
+def deactivate_participant_id(annotations_df, file_list_df, total, participant_id, lets_go, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, n_clicks, ann_completed, current_index):
+
+
+    if participant_id in possible_ids.keys():
+        file_list_df = pd.read_csv(os.path.join(persistent_storage, 'files_to_annotate_2round', f'group_{possible_ids[participant_id]}_v2.csv'), keep_default_na=False)
+
+        total = len(file_list_df)
+    
+
+        annotations_df, sentence, audio_player, emotions, confidence, comments, n_clicks, start, end, duration, ann_completed, current_index = load_first_example(annotations_df, file_list_df, 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)
+        
+        sentence_text = gr.Textbox(label="Transcription", interactive=False, value = sentence)
+        emotions = gr.Radio(["Blank", "Happy", "Sad", "Angry", "Neutral"], label="Predominant Emotion (Check the sidebar for major subclasses)", value =  emotions, visible = True)
+        confidence = gr.Radio(["Blank","Very Uncertain", "Somewhat Uncertain", "Neutral", "Somewhat confident", "Very confident"], label="How confident are you that the annotated emotion is present in the recording?", visible = True, value = confidence)
+        comments = gr.Textbox(label="Comments", visible =True, value = comments)
+        previous_button = gr.Button("Previous Example", visible = True)
+        next_button = gr.Button("Next Example",visible = True)
+        
+        return annotations_df, file_list_df, participant_id, participant_id, lets_go, total, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, n_clicks, start, end, duration, ann_completed, current_index
+
+    else:
+        raise gr.Error("Please insert a valid participant ID")

text_explanations.py

@@ -0,0 +1,223 @@
+css = """#myProgress {
+  width: 100%;
+  background-color: var(--block-border-color);
+  border-radius: 2px;
+}
+
+  #myBar {
+    width: 0%;
+    height: 30px;
+    background-color: var(--block-title-background-fill);
+    border-radius: 2px;
+  } 
+
+  #progressText {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); 
+    color: var(--block-title-text-color); 
+    font-weight: regular; 
+    font-size: 14px;
+  }
+
+  h1, h2, h3, h4 {
+    padding: var(--block-title-padding);
+    color: var(--block-title-text-color);
+    border: solid var(--block-title-border-width) var(--block-title-border-color);
+    border-radius: var(--block-title-radius);
+    background: var(--block-title-background-fill);
+    width: fit-content;
+    display: inline-block;
+  }
+
+  h4 {
+    margin: 0px;
+    color: var(--block-title-background-fill);
+    background: var(--block-title-text-color);
+  }
+
+  #instructions {
+    max-width: 980px;
+    align-self: center;
+  }
+
+  .content-box {
+    border-color: var(--block-border-color);
+    border-radius: var(--block-radius);
+    background: var(--block-background-fill);
+    padding: var(--block-label-padding);
+  }
+
+
+"""
+
+
+
+js_progress_bar = """
+    function move(start, end, total_duration, 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('#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);
+        console.log(n_ann + ' ' + total_ann);
+    }
+    """
+
+
+
+
+intro_html = """
+
+<h1>Emotionality in Speech</h1>
+<div class="content-box">
+
+    <p>Spoken language communicates more than just words. Speakers use tone, pitch, and other nonverbal cues to express emotions. In emotional speech, these cues can strengthen or even contradict the meaning of the words—for example, irony can make a positive phrase sound sarcastic. For this research, we will focus on three basic emotions plus neutral:</p>
+
+    <ul>
+    <li><h4>Anger</h4></li>
+    <li><h4>Happiness</h4></li>
+    <li><h4>Sadness</h4></li>
+    <li><h4>Neutral</h4></li>
+    </ul>
+
+    <p>This may seem like a small set, but it's a great starting point for analyzing emotions in such a large collection— <strong>303 hours of interviews! (That’s 13 days of nonstop listening! &#128558)</strong> </p>
+</div>
+
+<h2>The ACT-UP Oral History Project</h2>
+
+<div class="content-box">
+    <p>You will be annotating short audio clips extracted from the ACT UP (AIDS Coalition to Unleash Power) Oral History Project developed by Sarah Schulman and Jim Hubbard . 
+    This archive features interviews with individuals who were part of ACT UP during the late 1980s and early 1990s, amidst the AIDS epidemic. 
+    In each video, the subjects talk about their life before the epidemic, how they were affected by AIDS and their work in ACT UP.</p>
+</div>
+
+<h2>What will you be annotating?</h2>
+<div class="content-box">
+    <p>You will annotate one emotion per short audio clip, based on the following criteria:</p>
+
+    <ul>
+        <li>
+            <h4>Predominant Emotion:</h4> 
+            The emotion expressed with the highest intensity. Emotions can be complex, and multiple emotions may occur at the same time.
+        </li>
+        
+        <li>
+            <h4>Perceived Emotion at the Time of Recording:</h4> 
+            In Oral History Archives, interviewees discuss their past. However, you should annotate the emotion they appear to feel at the time of recording, NOT what they felt during the event they describe.
+        </li>
+        
+        <li>
+            <h4>Speech Emotionality:</h4> 
+            Focus on how something is said rather than what is said. For example, if a friend recounts an awful day with humor, the content may be sad, but the delivery is joyful. In this case, linguistic emotionality (content) would be classified as sad, while paralinguistic emotionality (tone and delivery) would be classified as joyful.
+        </li>
+    </ul>
+
+    <div style="text-align: center; padding: 1.5em 0;">
+        <strong>If you're uncertain about which emotion you are hearing, open the sidebar by clicking the arrow in the upper left corner. There, you'll find a list of major emotions grouped under each category!</strong>
+    </div>
+</div>
+"""
+
+examples_explanation = """<h3>Audio examples</h3>
+    <div class="content-box">
+        <p>Let's check out examples for the four emotions to annotate. Note that all these examples use the same sentence and are acted out, making the emotionality in speech more apparent. In a real-world setting, emotionality is more complex, so you will find a list of additional emotions within each of the three emotion categories (Happy, Sad, and Angry) to assist you during annotation.</p>
+    </div>"""
+side_bar_html = """
+<h3>Major subclasses</h3>
+<div class="content-box">
+    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
+        <span>&#128578;</span>
+        <h4 style="margin: 0;">Happiness</h4>
+
+    </div>
+    
+    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
+        <p>Affection, Goodwill, Joy, Satisfaction, Zest, Acceptance, Pride, Hope, Excitement, Relief, Passion, Caring</p>
+    </div>
+
+    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
+        <span>&#128577;</span>
+        <h4 style="margin: 0;">Sadness</h4>
+    </div>
+    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
+        <p>Suffering, Regret, Displeasure, Embarrassment, Sympathy, Depression</p>
+    </div>
+    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
+        <span>&#128545;</span>
+        <h4 style="margin: 0;">Anger</h4>
+    </div>
+    <div>
+        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">
+        <p>Irritability, Torment, Jealousy, Disgust, Rage, Frustration</p>
+        <p></p>
+    </div>
+</div>
+
+"""
+
+start_annotating = """<h2>How to use the annotation interface?</h2>
+<div class="content-box">
+    <ol>
+        <li>
+            Open the sidebar by clicking the arrow in the upper left corner.
+        </li>
+        <li>
+            Enter the participant ID you received via email.
+        </li>
+        <li>
+            Click <strong>"Let's go!"</strong> — this will lock your participant ID.
+        </li>
+        <li>
+            You’ll be directed to the annotation interface. The task will resume where you left off (on the last example you annotated), or start from the first audio if this is your first session.
+        </li>
+        <li>
+            When you finish all annotations, please send an email to <a href="mailto:f.pessanha@uu.nl">f.pessanha@uu.nl</a>.
+        </li>
+    </ol>
+    <p><strong>Note:</strong> You can click on any part of the audio to start playing from that point. Please avoid clicking on the audio while it is playing (pause it first). This will not affect the program, but it will help us understand how you interact with the interface.</p>
+    <div style="text-align: center; padding: 1.5em 0;">
+        <p><strong>Below you can find an overview of the annotation interface.</strong></p>
+    </div>
+
+</div>"""

utils.py

@@ -0,0 +1,45 @@
+import gradio as gr
+import pandas as pd
+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
+import json
+from text_explanations import *
+from utils import *
+
+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):
+    # Check if the password is correct
+    if password == password_files:
+        # Get the list of file paths and calculate the total usage
+        files = [
+            file for file in persistent_storage.glob("**/*.csv") if file.is_file()
+        ]
+        
+        # Calculate total usage (in bytes)
+        usage = sum([file.stat().st_size for file in files])
+        
+        # Convert file paths to strings for Gradio's File component
+        file_paths = [str(file.resolve()) for file in files]
+        
+        # Return the file paths (as strings) and the total usage in GB
+        return file_paths, f"{usage / (1024.0 ** 3):.3f}GB"
+    
+    else:
+        return gr.Warning("Please provide the correct password"), None
+
+def count_clicks(n_clicks):
+    n_clicks = n_clicks + 1
+    return n_clicks