Feat: Add progress bar and id

annotations.csv

@@ -1,5 +1,5 @@
-sample_id,sentence,emotion,comments
-007-0023,I was mostly hanging out in East Village in the clubs.,Neutral,
-007-0034,"And we became friends, and then he told me that his lover had died of AIDS.",Angry,
-007-0086,"I mean, given the size of ACT UP, I mean, really, you're talking about a handful.",Neutral,
-007-0129,"And why is he like, you know, why are you putting him in yellow face?",Neutral,
+sample_id,sentence,emotion,confidence,comments
+007-0023,I was mostly hanging out in East Village in the clubs.,Neutral,20,
+007-0034,"And we became friends, and then he told me that his lover had died of AIDS.",Angry,30,
+007-0086,"I mean, given the size of ACT UP, I mean, really, you're talking about a handful.",Neutral,70,
+007-0129,"And why is he like, you know, why are you putting him in yellow face?",Angry,0,

app.py

@@ -4,13 +4,41 @@ 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;
+} 
+
+#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'))
-annotations_completed = 0
 total_annotations = len(file_list)
-
 # Initialize an empty DataFrame to store annotations
-annotations = pd.DataFrame(columns=['sample_id', 'sentence', 'emotion', 'comments'])
+annotations = pd.DataFrame(columns=['sample_id', 'sentence', 'emotion', 'confidence', 'comments'])
 current_index = {"index": 0}  # Dictionary to allow modifying inside functions
 
 
@@ -25,14 +53,15 @@ def load_example(index):
 
     # 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": '',
+        annotations.iloc[index].to_dict() if index < len(annotations) else {"sample_id": row["SAMPLE ID"], "emotion": '', "confidence": 0,
                                                                             "comments": ''}
     )
-    return (sentence, audio_path, previous_annotation['emotion'], previous_annotation["comments"])
+    return (sentence, audio_path, previous_annotation['emotion'], previous_annotation['confidence'], current_index['index'] + 1, previous_annotation["comments"])
 
 
-def save_annotation(emotions, comments):
+def save_annotation(emotions, confidence, comments):
     """Save the annotation for the current example."""
+
     idx = current_index["index"]
     row = file_list.iloc[idx]
     sample_id = row["SAMPLE ID"]
@@ -40,21 +69,21 @@ def save_annotation(emotions, comments):
 
     # Update or append annotation
     if sample_id in annotations["sample_id"].values:
-        annotations.loc[annotations["sample_id"] == sample_id, ["emotion", "comments"]] = \
-            [emotions, comments]
+        annotations.loc[annotations["sample_id"] == sample_id, ["emotion", "confidence", "comments"]] = \
+            [emotions, confidence, comments]
     else:
-        annotations.loc[len(annotations)] = [sample_id, sentence, emotions, comments]
-
+        annotations.loc[len(annotations)] = [sample_id, sentence, emotions, confidence, comments]
+        ann_completed.value += 1
     annotations.to_csv("annotations.csv", index=False)  # Save to a CSV file
     
 
-def next_example(emotions, comments):
+def next_example(emotions, confidence, comments):
     """Move to the next example."""
     if emotions == '':
         raise gr.Error("Please fill out the emotion section")
     else:
         
-        save_annotation(emotions, comments)
+        save_annotation(emotions, confidence, comments)
         if current_index["index"] < len(file_list) - 1:
             current_index["index"] += 1
             return load_example(current_index["index"])
@@ -62,43 +91,64 @@ def next_example(emotions, comments):
     #return "End of examples", None, 0, 0, 0, 0, ''
 
 
-def previous_example(emotion, comments):
+def previous_example(emotion, confidence, comments):
     """Move to the previous example."""
-    save_annotation(emotion, comments)
+    save_annotation(emotion, confidence, comments)
     if current_index["index"] > 0:
         current_index["index"] -= 1
         return load_example(current_index["index"])
     return load_example(current_index["index"])
 
+
 def update_progress():
+    
     """Update annotation progress"""
-    global annotations_completed
-    if annotations_completed < total_annotations:
-        annotations_completed += 1  
+    global ann_completed
+    if ann_completed < total_annotations:
+        ann_completed += 1  
     
-    progress = annotations_completed / total_annotations
-    return f"Progress: {annotations_completed}/{annotations_tasks}"
+    return f"{ann_completed}/{ total_annotations}"
+
+def change_visibility(elements):
+    for el in elements:
+        el.visible = True
 
+# ===================
 # Gradio Interface
+# ===================
 audio_path = 'test.mp3'
-with (gr.Blocks(theme=gr.themes.Soft()) as demo):
-    gr.Markdown("# Task Progress Tracker")
-    progress_text = gr.Textbox(value="Progress: 0/10", interactive=False)
+
+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!")
+    
+    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">Completed: /</span> 
+    </div>
+    </div>""")
 
     # Row with audio player
     with gr.Row():
-        audio_player = gr.Audio(value=audio_path, label="Audio", type="filepath", interactive=False)
+        audio_player = gr.Audio(value=audio_path, label="Audio", type="filepath", interactive=False, visible=False)
 
     # Hidden row with corresponding sentence
     with gr.Row():
-        with gr.Accordion(label="Click to see the sentence", open=False):
+        accordion = gr.Accordion(label="Click to see the sentence", open=False, visible = False)
+        with accordion:
             sentence_text = gr.Textbox(label="Sentence", interactive=False)
 
     # Row for emotion annotation and confidence
     with gr.Row():        
-        emotions = gr.Radio(["Joy", "Sad", "Angry", "Neutral"], label="Predominant Emotion")
-        
-        confidence = gr.Slider(label="Confidence (%)", minimum=0, maximum=100, step=10)
+        emotions = gr.Radio(["Joy", "Sad", "Angry", "Neutral"], label="Predominant Emotion", 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():
@@ -107,36 +157,39 @@ with (gr.Blocks(theme=gr.themes.Soft()) as demo):
 
     # Next and Previous Buttons
     with gr.Row():
-        previous_button = gr.Button("Previous Example")
-        next_button = gr.Button("Next Example")
+        previous_button = gr.Button("Previous Example", visible=False)
+        next_button = gr.Button("Next Example", visible=False)
 
 
-    comments = gr.Textbox(label="Comments", interactive=True)
+    # Comment section
+    comments = gr.Textbox(label="Comments", interactive=True, visible=False)
+    
+    
 
- 
-    sentence_text.value, audio_player.value, emotions.value, comments.value = load_example(
+    # Load example
+    sentence_text.value, audio_player.value, emotions.value, confidence.value, ann_completed.value, comments.value = load_example(
         current_index["index"])
+    
 
+
+    # Go back
     previous_button.click(
         previous_example,
-        inputs=[emotions, comments],
-        outputs=[sentence_text, audio_player, emotions, comments],
+        inputs=[emotions, confidence, comments],
+        outputs=[sentence_text, audio_player, emotions, confidence, ann_completed, comments],
     )
 
+    # Go to the next example
     next_button.click(
         next_example,
-        inputs=[emotions, comments],
-        outputs=[sentence_text, audio_player, emotions, comments],
+        inputs=[emotions, confidence, comments],
+        outputs=[sentence_text, audio_player, emotions, confidence, ann_completed, comments],
     )
 
-    next_button.click(update_progress,  outputs=[progress_text])
-
-    
-
-    
-
-
+    #Update progress bar
+    next_button.click(None, [], [ann_completed, total], js = js_progress_bar)
     
+    lets_go.click(change_visibility, inputs = [audio_player, accordion, emotions, confidence, previous_button, next_button, comments], outputs = None)
     
 demo.launch()