app.py

import gradio as gr
import pandas as pd
import os
import gradio as gr


css = """#myProgress {
  width: 100%;
  background-color: gray;
  border-radius: 2px;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: blue;
  border-radius: 2px;
} 

#myHideBlock {
  width: 110%;
  height: 110%;
  background-color: blue;
} 

#progressText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  color: white; 
  font-weight: bold; 
  font-size: 14px; 
"""
js_progress_bar = """
    function move(n_ann, total_ann) {

    var elem = document.getElementById("myBar");
    elem.style.width = n_ann/total_ann * 100 + "%";
    progressText.innerText = 'Completed: ' + n_ann + '/' + total_ann
    }
    """
# List of all audio files to annotate
file_list = pd.read_excel(os.path.join('combined_annotations.xlsx'))
total_annotations = len(file_list)
# Initialize an empty DataFrame to store annotations
annotations = pd.DataFrame(columns=['sample_id', 'sentence', 'emotion', 'confidence', 'comments'])
current_index = {"index": 0}  # Dictionary to allow modifying inside functions


def load_example(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.iloc[index]
    audio_path = os.path.join('files_to_annotate_padded_smaller_emotion_set', 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.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'], current_index['index'] + 1, previous_annotation["comments"])


def save_annotation(emotions, confidence, comments, participant_id):
    """Save the annotation for the current example."""

    idx = current_index["index"]
    row = file_list.iloc[idx]
    sample_id = row["SAMPLE ID"]
    sentence = row["SENTENCE"]

    # Update or append annotation
    if sample_id in annotations["sample_id"].values:
        annotations.loc[annotations["sample_id"] == sample_id, ["emotion", "confidence", "comments"]] = \
            [emotions, confidence, comments]
    else:
        annotations.loc[len(annotations)] = [sample_id, sentence, emotions, confidence, comments]
        ann_completed.value += 1
    annotations.to_csv(f"{participant_id}_annotations.csv", index=False)  # Save to a CSV file
    

def next_example(emotions, confidence, comments, participant_id):
    """Move to the next example."""
    if emotions == "Blank":
        gr.Warning("Please fill out the emotion section")
    else:
        
        save_annotation(emotions, confidence, comments, participant_id)
        if current_index["index"] < len(file_list) - 1:
            current_index["index"] += 1
    return load_example(current_index["index"])

def previous_example(emotion, confidence, comments, participant_id):
    """Move to the previous example."""
    if emotion.value != "Blank":
        save_annotation(emotion, confidence, comments, participant_id)
        if current_index["index"] > 0:
            current_index["index"] -= 1
            return load_example(current_index["index"])
        return load_example(current_index["index"])

def deactivate_participant_id(participant_id, lets_go):
    participant_id = gr.Textbox(label='What is your participant ID?', value = participant_id, interactive = False)
    lets_go = gr.Button("Participant selected!", interactive = False)
    return participant_id, lets_go

def activate_elements(emotions, confidence, comments, next_button, previous_button):

    emotions = gr.Radio(["Blank", "Joy", "Sad", "Angry", "Neutral"], label="Predominant Emotion", value = "Blank", visible = True)
    confidence = gr.Slider(label="Confidence (%)", minimum=0, maximum=100, step=10, visible = True)
    comments = gr.Textbox(label="Comments", visible =True)
    previous_button = gr.Button("Previous Example", visible = True)
    next_button = gr.Button("Next Example",visible = True)

    return emotions, confidence, comments, next_button, previous_button
# ===================
# Gradio Interface
# ===================


with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
    
    ann_completed = gr.Number(1, visible=False)
    total = gr.Number(total_annotations, visible=False)
    
    # Row with progress bar
    gr.HTML("""
    <div id="myProgress">
    <div id="myBar">
    <span id="progressText">Press "Let's go!" to start</span> 
    </div>
    </div>""")

    # Row with audio player
    with gr.Row():
        audio_player = gr.Audio(value= 'test.mp3', label="Audio", type="filepath", interactive=False)

    # Hidden row with corresponding sentence
    with gr.Row():
        accordion = gr.Accordion(label="Click to see the sentence", open=False)
        with accordion:
            sentence_text = gr.Textbox(label="Transcription", interactive=False, value = 'This is a sentence.')
    # Row for emotion annotation and confidence
    with gr.Row():        
        emotions = gr.Radio(["Blank", "Joy", "Sad", "Angry", "Neutral"], label="Predominant Emotion", value = "Blank", visible = False)

    with gr.Row():    
        confidence = gr.Slider(label="Confidence (%)", minimum=0, maximum=100, step=10, visible = False)
    # Instructions for emotion annotation
    with gr.Sidebar():
        participant_id = gr.Textbox(label='What is your participant ID?', interactive = True)
        lets_go = gr.Button("Let's go!")
        #happy_words = gr.Textbox(label = "Happy")
    

    with gr.Row():
        # Comment section
        comments = gr.Textbox(label="Comments", visible =False)
        
    # Next and Previous Buttons
    with gr.Row():
        previous_button = gr.Button("Previous Example", visible = False)
        next_button = gr.Button("Next Example", visible = False)

    # Go back
    previous_button.click(
        previous_example,
        inputs=[emotions, confidence, comments, participant_id],
        outputs=[sentence_text, audio_player, emotions, confidence, ann_completed, comments],
    )

    # Go to the next example
    next_button.click(
        next_example,
        inputs=[emotions, confidence, comments, participant_id],
        outputs=[sentence_text, audio_player, emotions, confidence, ann_completed, comments],
    )
    #Update progress bar
    next_button.click(None, [], [ann_completed, total], js = js_progress_bar)
    
    
    lets_go.click(None, [], [ann_completed, total], js = js_progress_bar)
    lets_go.click(deactivate_participant_id, [participant_id, lets_go], [participant_id, lets_go])
    lets_go.click(activate_elements, [emotions, confidence, comments, next_button, previous_button], [emotions, confidence, comments, next_button, previous_button])
    lets_go.click(load_example, inputs = [gr.Number(current_index["index"], visible = False)], outputs = [sentence_text, audio_player, emotions, confidence, ann_completed, comments])

    
demo.launch()