Feat: Update instructions

app.py

@@ -6,6 +6,8 @@ from pathlib import Path
 from huggingface_hub import login
 from mutagen.mp3 import MP3
 from mutagen.wave import WAVE
+import json
+
 css = """#myProgress {
   width: 100%;
   background-color: var(--block-border-color);
@@ -116,7 +118,9 @@ js_progress_bar = """
 
 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>
@@ -138,25 +142,29 @@ intro_html = """
 </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>
+        <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>
 
-    <p>Further, you will be asked to fill <strong>"How confident you are that the annotated emotion is present in the recording?"</strong> from a scale of 0 to 10, with 0 being "not at all confident" and 1 being "certain, completely confident". There will be a <strong>"Comment/Feedback"</strong> section where you can makes notes. Below the audio, there will be an option to view the transcribed sentence. Please use this only if you are struggling to understand the audio.</p>
+    <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>
 """
 
@@ -165,63 +173,75 @@ examples_explanation = """<h3>Audio examples</h3>
         <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>The task</h3>
+<h3>Major subclasses</h3>
 <div class="content-box">
-    <p>You will annotate one emotion per short audio clip, based on the following criteria:</p>
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px;">
-        <span>&#9989;</span>
-        <h4 style="margin: 0;">Predominant Emotion</h4>
+    <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: 20px;">
-        <span>&#9989;</span>
-        <h4 style="margin: 0;">Perceived Emotion at the Time of Recording</h4>
+    <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: 20px;">
-        <span>&#9989;</span>
-        <h4 style="margin: 0;">Speech Emotionality</h4>
+    <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>
-<h3>Major subclasses</h3>
 
-<div class="content-box">
-    <table border="1">
-        <thead>
-            <tr>
-                <th>Emotion Label</th>
-                <th>Major Subclasses</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Happiness</td>
-                <td>Affection, Goodwill, Joy, Satisfaction, Zest, Acceptance, Pride, Hope, Excitement, Relief, Passion, Caring</td>
-            </tr>
-            <tr>
-                <td>Sadness</td>
-                <td>Suffering, Regret, Displeasure, Embarrassment, Sympathy, Depression</td>
-            </tr>
-            <tr>
-                <td>Anger</td>
-                <td>Irritability, Torment, Jealousy, Disgust, Rage, Frustration</td>
-            </tr>
-        </tbody>
-    </table>
-</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 right 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>
+    <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>"""
 global file_list
 persistent_storage = Path('/data')
 
 password_files = os.getenv("password_files")
 
+
 possible_ids = {'Tiger-001': 0, 'Panda-002': 0, 
                 'Falcon-003': 1, 'Wolf-004': 1,
                 'Dolphin-005': 2, 'Eagle-006': 2,
                 'Jaguar-007': 3, 'Rhino-008': 3,
                 'Zebra-009': 4, 'Lion-010': 4,
                 'Cheetah-011': 5, 'Bear-012': 5}
-
+#possible_ids = json.load(os.getenv("possible_ids"))
 
 
 def get_audio_duration(file_path):
@@ -353,7 +373,7 @@ def deactivate_participant_id(participant_id, lets_go, total, previous_button, n
         lets_go = gr.Button("Participant selected!", interactive = False)
         
         sentence_text = gr.Textbox(label="Transcription", interactive=False, value = sentence)
-        emotions = gr.Radio(["Blank", "Joy", "Sad", "Angry", "Neutral"], label="Predominant Emotion", value =  emotions, visible = True)
+        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)
@@ -380,7 +400,7 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
     annotations = pd.DataFrame(columns=['sample_id', 'sentence', 'emotion', 'confidence', 'comments', 'n_clicks'])
 
     # Instructions for emotion annotation
-    with gr.Sidebar():
+    with gr.Sidebar(open = False):
         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)
@@ -409,6 +429,9 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
 
             #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.Number(0, visible=False)
@@ -483,5 +506,5 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         get_files_button.click(get_storage, inputs= [password], outputs=[files, storage], postprocess=False)
 
         
-demo.launch(allowed_paths = ['/data/files_to_annotate_2round'])
+demo.launch(allowed_paths = ['/data'])