Feat: Update progress bar to contain current index

app.py

@@ -62,20 +62,19 @@ css = """#myProgress {
 
 
 js_progress_bar = """
-    function move(n_ann, total_ann) {
+    function move(current_index, n_ann, total_ann) {
 
     var elem = document.getElementById("myBar");
     elem.style.width = n_ann/total_ann * 100 + "%";
-    progressText.innerText = 'Completed: ' + n_ann + ' / ' + total_ann;
-
+    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.3;
-    const widthPct = 0.3;
+    const leftOffsetPct = 0.5;
+    const widthPct = 0.5;
     
 
     // Create a style element for the shadow DOM
@@ -214,7 +213,7 @@ global file_list
 global total_annotations 
 # 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
+
 password_files = os.getenv("password_files")
 
 possible_ids = {'Tiger-001': 0, 'Panda-002': 0, 
@@ -244,22 +243,22 @@ def get_storage(password):
     return files, f"{usage/(1024.0 ** 3):.3f}GB"
 
 
-def load_first_example(participant_id, ann_completed):
+def load_first_example(participant_id, ann_completed, current_index):
     """ Loads and first example and updates index"""
     global annotations
-    global current_index
+
     path_ann = f'{persistent_storage}/{participant_id}_annotations.csv'
     print(path_ann)
     if os.path.exists(path_ann):
         annotations = pd.read_csv(path_ann)
 
-        current_index['index'] = len(annotations)
+        current_index = len(annotations)
         print('path was found')
         print(annotations)
         print(len(annotations))
         ann_completed = gr.Number(len(annotations) - 1, visible=False)
         print(len(annotations))
-    return ann_completed, *load_example(current_index["index"])
+    return *load_example(current_index), ann_completed, current_index
     
 def load_example(index):
     """Loads the example in row #index from dataframe file_list. 
@@ -274,15 +273,14 @@ def load_example(index):
         annotations.iloc[index].to_dict() if index < len(annotations) else {"sample_id": row["sample_id"], "emotion": 'Blank', "confidence": 0,
                                                                             "comments": ''}
     )
-    print(previous_annotation)
-    return (sentence, audio_path, previous_annotation['emotion'], previous_annotation['confidence'], current_index['index'], previous_annotation["comments"])
+    
+    return (sentence, audio_path, previous_annotation['emotion'], previous_annotation['confidence'], previous_annotation["comments"])
 
 
-def save_annotation(emotions, confidence, comments, participant_id, ann_completed):
+def save_annotation(emotions, confidence, comments, participant_id, ann_completed, current_index):
     """Save the annotation for the current example."""
 
-    idx = current_index["index"]
-    row = file_list.iloc[idx]
+    row = file_list.iloc[current_index]
     sample_id = row["sample_id"]
     sentence = row["sentence"]
 
@@ -297,43 +295,44 @@ def save_annotation(emotions, confidence, comments, participant_id, ann_complete
     
     return ann_completed
 
-def next_example(emotions, confidence, comments, participant_id, ann_completed):
+def next_example(emotions, confidence, comments, participant_id, ann_completed, current_index):
     """Move to the next example."""
-    global current_index
+
     if emotions == "Blank":
         gr.Warning("Please fill out the emotion section. 'Blank' is not a valid emotion.")
     else:
         
-        ann_completed = save_annotation(emotions, confidence, comments, participant_id, ann_completed)
-        if current_index["index"] < len(file_list) - 1:
-            current_index["index"] += 1
-    return load_example(current_index["index"])
+        ann_completed = save_annotation(emotions, confidence, comments, participant_id, ann_completed, current_index)
+        if current_index < len(file_list) - 1:
+            current_index += 1
+    return *load_example(current_index), ann_completed, current_index
 
-def previous_example(emotion, confidence, comments, participant_id,  ann_completed):
+def previous_example(emotion, confidence, comments, participant_id,  ann_completed, current_index):
     """Move to the previous example."""
-    global current_index
+  
     if emotion != "Blank":
-        ann_completed = save_annotation(emotion, confidence, comments, participant_id,  ann_completed)
-    if current_index["index"] > 0:
-        current_index["index"] -= 1
+        ann_completed = save_annotation(emotion, confidence, comments, participant_id,  ann_completed, current_index)
+    if current_index > 0:
+        current_index -= 1
             
-    return load_example(current_index["index"])
+    return *load_example(current_index), ann_completed, current_index
 
-def deactivate_participant_id(participant_id, lets_go, total, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, ann_completed):
+def deactivate_participant_id(participant_id, lets_go, total, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, ann_completed, current_index):
     global file_list
     global total_annotations
     if participant_id in possible_ids.keys():
         file_list = pd.read_csv(os.path.join(persistent_storage, 'files_to_annotate_2round', f'group_{possible_ids[participant_id]}.csv'))
 
-        participant_id = gr.Textbox(label='What is your participant ID?', value = participant_id, interactive = False)
-        lets_go = gr.Button("Participant selected!", interactive = False)
+        
         
         total_annotations = len(file_list)
         total = gr.Number(total_annotations, visible=False)
 
 
-        ann_completed, sentence, audio_player, emotions, confidence, current_index['index'], comments = load_first_example(participant_id, ann_completed)
+        sentence, audio_player, emotions, confidence, comments, 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)
         emotions = gr.Radio(["Blank", "Joy", "Sad", "Angry", "Neutral"], label="Predominant Emotion", value =  emotions, visible = True)
         confidence = gr.Slider(label="How confident are you that the annotated emotion is present in the recording? (%)", minimum=0, maximum=100, step=10, visible = True, value = confidence)
         comments = gr.Textbox(label="Comments", visible =True, value = comments)
@@ -342,7 +341,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
+    return participant_id, lets_go, total, previous_button, next_button, sentence_text, audio_player, emotions, confidence, comments, ann_completed, current_index
 
 # ===================
 # Gradio Interface
@@ -378,12 +377,13 @@ 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)
+            #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)
 
     
     with gr.Tab("Annotation Interface"):
         ann_completed = gr.Number(0, visible=False)
         total = gr.Number(0, visible=False)
+        current_index = gr.Number(0, visible = False)
         # Row with progress bar
         
         gr.HTML("""
@@ -422,20 +422,18 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         # Go back
         previous_button.click(
             previous_example,
-            inputs=[emotions, confidence, comments, participant_id,  ann_completed],
-            outputs=[sentence_text, audio_player, emotions, confidence, ann_completed, comments],
-        )
+            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)
 
         # Go to the next example
         next_button.click(
             next_example,
-            inputs=[emotions, confidence, comments, participant_id, ann_completed],
-            outputs=[sentence_text, audio_player, emotions, confidence, ann_completed, comments],
-        ).then(None, [], [ann_completed, total], js = js_progress_bar)
+            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)
         
         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], [participant_id, lets_go, total, *buttons, *data, ann_completed]).then( None, [], [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, ann_completed, current_index]).then( None, [], [current_index, ann_completed, total], js = js_progress_bar)
         
     
     with gr.Tab("Access Files"):