Feat: Protype version of waveform region

app.py

@@ -60,11 +60,51 @@ js_progress_bar = """
 
     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;
+
+    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;
+    
+
+    // Create a style element for the shadow DOM
+    const style = document.createElement('style');
+    style.textContent = `
+    .wrapper::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: ${canvases.offsetWidth * leftOffsetPct}px;
+        width: ${canvases.offsetWidth * widthPct}px;
+        height: 100%;
+        background-color: blue;
+        z-index: 999;
+        opacity: 0.5;
+    }
+
+    /* Ensure parent has positioning context */
+    .wrapper {
+        position: relative;
+    }
+    `;
+
+    // Append the style to the shadow root
+    shadowRoot.appendChild(style);
+
+    console.log('Added pseudo-element to canvases');
+
+
     }
     """
 
 
+
+
 intro_html = """
 <h1>Emotionality in Speech</h1>
 
@@ -116,6 +156,7 @@ intro_html = """
 </div>
 """
 
+
 # List of all audio files to annotate
 file_list = pd.read_excel(os.path.join('combined_annotations.xlsx'))
 total_annotations = len(file_list)
@@ -223,7 +264,8 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         <div id="myBar">
         <span id="progressText">Press "Let's go!" to start</span> 
         </div>
-        </div>""", padding = False)
+        </div>
+        """, padding = False)
 
         # Row with audio player
         with gr.Row():
@@ -268,9 +310,9 @@ with (gr.Blocks(theme=gr.themes.Soft(), css = css) as demo):
         
         
         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])
+        # 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()