Update transcription panel

- add horizontal divider between regions

app/assets/jinja-templates/transcription

@@ -1,10 +1,17 @@
-{%- for line in lines -%}
+{% set count = namespace(value=1) -%}
+{% for region in regions -%}
+{% for line in region -%}
 <span
-    class="textline line{{loop.index}}"
-    onmouseover="document.querySelectorAll('.line{{loop.index}}').forEach(element => {element.classList.add('highlighted')});"
+    class="textline line{{count.value}}"
+    onmouseover="document.querySelectorAll('.line{{count.value}}').forEach(element => {element.classList.add('highlighted')});"
     onmouseout="document.querySelectorAll('*').forEach(element => {element.classList.remove('highlighted')});"
 >
     {{line.text}}
 </span>
 <br>
+{% set count.value = count.value + 1 %}
+{% endfor %}
+{% if not loop.last %}
+<hr class="region-divider">
+{%endif%}
 {% endfor %}

app/gradio_config.py

@@ -41,4 +41,9 @@ span.highlighted {
   font-size: large;
 }
 
+hr.region-divider {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
 """

app/tabs/visualizer.py

@@ -12,7 +12,8 @@ def render_image(collection, current_page_index):
 
 
 def render_transcription(collection, current_page_index):
-    return _TRANSCRIPTION_TEMPLATE.render(lines=collection[current_page_index].traverse(lambda node: node.is_line()))
+    regions = collection[current_page_index].traverse(lambda node: node.children and all(child.is_line() for child in node))
+    return _TRANSCRIPTION_TEMPLATE.render(regions=regions)
 
 
 def toggle_navigation_button(collection):