Update app.py

app.py

@@ -23,25 +23,29 @@ css = """
 <style>
 .manuscript {
     display: flex;
-    margin-bottom: 20px;
-    align-items: flex-start;  /* Align items to the top */
+    margin-bottom: 10px;
+    align-items: baseline;
 }
 .annotation {
-    width: 10%;
-    padding-right: 20px;
-    color: grey;
+    width: 20%;
+    padding-right: 10px;
+    color: grey !important;
     font-style: italic;
-    padding-top: 5px;  /* Add some top padding to align with the title */
+    text-align: right;
 }
 .content {
-    width: 70%;
+    width: 80%;
 }
 h2 {
-    margin-top: 0;
-    margin-bottom: 10px;  /* Add some bottom margin for spacing */
+    margin: 0;
+    font-size: 1.5em;
 }
-.title-content {
-    margin-top: -5px;  /* Negative margin to offset the padding of annotation */
+.title-content h2 {
+    font-weight: bold;
+}
+.bibliography-content {
+    color:darkgreen !important;
+    margin-top: -5px;  /* Adjust if needed to align with annotation */
 }
 </style>
 """
@@ -116,6 +120,8 @@ def transform_chunks(marianne_segmentation):
         
         if entity_group == 'title':
             html_output.append(f'<div class="manuscript"><div class="annotation">{result_entity}</div><div class="content title-content"><h2>{word}</h2></div></div>')
+        elif entity_group == 'bibliography':
+            html_output.append(f'<div class="manuscript"><div class="annotation">[{annotation}]</div><div class="content bibliography-content">{word}</div></div>')
         else:
             html_output.append(f'<div class="manuscript"><div class="annotation">{result_entity}</div><div class="content">{word}</div></div>')