Feat: Instructions page

_annotations.csv

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

app.py

@@ -6,14 +6,14 @@ import gradio as gr
 
 css = """#myProgress {
   width: 100%;
-  background-color: gray;
+  background-color: var(--block-border-color);
   border-radius: 2px;
 }
 
 #myBar {
   width: 0%;
   height: 30px;
-  background-color: blue;
+  background-color: var(--block-title-background-fill);
   border-radius: 2px;
 } 
 
@@ -28,18 +28,47 @@ css = """#myProgress {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); 
-  color: white; 
-  font-weight: bold; 
-  font-size: 14px; 
+  color: var(--block-title-text-color); 
+  font-weight: regular; 
+  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
+    progressText.innerText = 'Completed: ' + n_ann + ' / ' + total_ann
     }
     """
+
+intro = """
+# Emotionality in Speech
+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:
+    \n* Anger
+    \n* Happiness
+    \n* Sadness
+    \n* Neutral
+\nThis may seem like a small set, but it's a great starting point for analyzing emotions in such a large collection—303 hours of interviews! (That’s 13 days of nonstop listening!)"""
+
+about_act_up = """
+## What is the archive you will be annotating?
+You will be annotating short audio clips extracted from the ACT UP (AIDS Coalition to Unleash Power) Oral History Project. 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. 
+"""
+about_emotions = """ 
+## What will you be annotating?
+You will annotate one emotion per short audio clip, based on the following criteria:
+    \n* Predominant Emotion: The emotion expressed with the highest intensity. Emotions can be complex, and multiple emotions may occur at the same time.
+    \n* Perceived Emotion at the Time of Recording: 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.
+    \n* Speech Emotionality: 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.
+
+Further, you will be asked to fill "How confident you are that the annotated emotion is present in the recording?" from a scale of 0 to 10, with 0 being "not at all confident" and 1 being "certain, completely confident".
+\nThere will be a "Comment/Feedback" section where you can makes notes.
+\nBelow the audio, there will be an option to view the transcribed sentence. Please use this only if you are struggling to understand the audio.
+\nLet’s explore the four possible categories and listen to some examples!
+
+"""
 # List of all audio files to annotate
 file_list = pd.read_excel(os.path.join('combined_annotations.xlsx'))
 total_annotations = len(file_list)
@@ -122,33 +151,6 @@ def activate_elements(emotions, confidence, comments, next_button, previous_butt
 
 
 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)
@@ -156,37 +158,75 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         #happy_words = gr.Textbox(label = "Happy")
     
 
-    with gr.Row():
-        # Comment section
-        comments = gr.Textbox(label="Comments", visible =False)
+    with gr.Tab("Instructions"):
+        instructions = gr.Markdown(intro)
+        about_data = gr.Markdown(about_act_up)
+        about_em = gr.Markdown(about_emotions)
+        
+        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)
         
-    # 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])
 
-    
+    with gr.Tab("Annotation Interface"):
+
+        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, show_download_button = False, show_share_button = 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)
+
+        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()
 

kkk_annotations.csv

@@ -0,0 +1,3 @@
+sample_id,sentence,emotion,confidence,comments
+007-0023,I was mostly hanging out in East Village in the clubs.,Neutral,0,
+007-0034,"And we became friends, and then he told me that his lover had died of AIDS.",Neutral,0,

tt_annotations.csv

@@ -0,0 +1,4 @@
+sample_id,sentence,emotion,confidence,comments
+007-0023,I was mostly hanging out in East Village in the clubs.,Joy,0,
+007-0034,"And we became friends, and then he told me that his lover had died of AIDS.",Sad,0,
+007-0086,"I mean, given the size of ACT UP, I mean, really, you're talking about a handful.",Neutral,0,

yguygyguyg_annotations.csv

@@ -0,0 +1,11 @@
+sample_id,sentence,emotion,confidence,comments
+007-0023,I was mostly hanging out in East Village in the clubs.,Sad,0,huihi
+007-0034,"And we became friends, and then he told me that his lover had died of AIDS.",Angry,0,
+007-0086,"I mean, given the size of ACT UP, I mean, really, you're talking about a handful.",Angry,0,
+007-0129,"And why is he like, you know, why are you putting him in yellow face?",Neutral,0,
+007-0152,"But what was really amazing was that this was really one of the first grassroots protest movements that was spearheaded by lesbian, gay, Asian, Pacific Islanders.",Neutral,0,
+007-0165,"We had a couple of people, like, you know, some people come and go.",Neutral,0,
+007-0174,"And then to be approached by these crazy Asian actors, I think that might be a little much.",Neutral,0,
+007-0248,"And again, you're talking about this community that's sort of really just starting to come up.",Angry,0,
+007-0444,"I mean, they're friendly to you. There's a camaraderie, definitely.",Sad,0,
+008-0016,"My other feminist friends, and we were a little clique.",Sad,0,