Correct app.py

app.py

@@ -29,8 +29,7 @@ color_scheme = {
 def get_highlighted_text(doc):
     """
     Wraps detected ASCs in each sentence with a span tag containing an inline style.
-    The inline style sets a custom background color based on the tag.
-    Additionally, the entity's tag name is appended as a small superscript to make it always visible.
+    In addition, appends the entity's tag name in an extra span so the label is always visible.
     """
     highlighted_sentences = []
     for sent in doc.sents:
@@ -38,19 +37,19 @@ def get_highlighted_text(doc):
         # Find all entities fully contained within this sentence.
         ents_in_sent = [ent for ent in doc.ents if ent.start_char >= sent.start_char and ent.end_char <= sent.end_char]
         if ents_in_sent:
-            # Process entities in reverse order so character offsets remain valid.
+            # Process entities in reverse order so the character offsets remain valid.
             ents_in_sent = sorted(ents_in_sent, key=lambda x: x.start_char, reverse=True)
             for ent in ents_in_sent:
                 ent_start = ent.start_char - sent.start_char
                 ent_end = ent.end_char - sent.start_char
-                # Get the color from our scheme; use default if not defined.
+                # Get the color based on the tag; default to light gray if not found.
                 color = color_scheme.get(ent.label_, "#cccccc")
-                # Wrap the entity with inline style and append its label as a superscript.
+                # Wrap the entity text with an inline style and add the tag label in a separate span.
                 s = (
                     s[:ent_start]
                     + f'<span style="background-color: {color}; font-weight: bold;" title="{ent.label_}">'
                     + s[ent_start:ent_end]
-                    + f'<sup style="font-size:0.6em; margin-left:2px;">{ent.label_}</sup>'
+                    + f'<span style="display:inline-block; vertical-align: super; font-size: 0.8em; margin-left: 2px; color: black;">{ent.label_}</span>'
                     + '</span>'
                     + s[ent_end:]
                 )
@@ -95,7 +94,7 @@ sample_text = (
     "music to everyone again.' "
     "That evening, as Lyla set up by the village fountain to play, something miraculous happened. Her old, broken lute began to transform, glowing just "
     "like the bread had. In her hands now was the most beautiful lute she had ever seen, shimmering with gold and silver strings. When she strummed it, "
-    "the music that flowed out wasn’t just sound—it was pure joy."
+    "the music that flowed out wasn’t just sound—it was pure joy. "
     "The village gathered around her, drawn by the enchanting melodies that seemed to fill their hearts with warmth and happiness. People laughed, danced, "
     "and even sang along, forgetting their worries. "
     "Oliver watched from his bakery window, smiling to himself. He had no idea what Lyla had wished for, but he could see its magic at work. He knew his "
@@ -104,7 +103,7 @@ sample_text = (
     "distant lands just to hear her play, and with every note, the village grew a little brighter, a little happier. "
     "As for Oliver, he continued to bake with joy in his heart, knowing that sometimes the smallest acts of kindness—like baking a loaf of bread—could "
     "make the biggest difference in someone’s life. "
-    "And so, the village became known not just for its delicious bread, but for its music, magic, and the happiness that lingered in every corner. The end. "
+    "And so, the village became known not just for its delicious bread, but for its music, magic, and the happiness that lingered in every corner. "
     "(Generated by ChatGPT 4o 🤖)"
 )
 
@@ -114,19 +113,17 @@ def fill_sample_text():
 # Build the Gradio interface.
 with gr.Blocks() as demo:
     gr.Markdown("# ASC tagger demo")
-    gr.Markdown("Enter some text to have ASCs tagged with a custom inline color scheme. Use the button below to fill in a sample text.")
+    gr.Markdown("Enter some text to have ASCs tagged with a custom inline color scheme. Use the button below to fill in sample text.")
     
     input_textbox = gr.Textbox(lines=10, label="Input Text", placeholder="Enter text here...")
     output_html = gr.HTML(label="Tagged Text")
-    # Button to fill sample text into the input textbox.
-    fill_btn = gr.Button("Fill Sample Text")
-    # Button to analyze the text.
     tag_btn = gr.Button("Tag ASCs")
-    
+    fill_btn = gr.Button("Fill Sample Text")
+
+    tag_btn.click(fn=process_text, inputs=input_textbox, outputs=output_html)
     # When "Fill Sample Text" is clicked, populate the textbox.
     fill_btn.click(fn=fill_sample_text, inputs=[], outputs=input_textbox)
     # When "Tag ASCs" is clicked, process the input text.
-    tag_btn.click(fn=process_text, inputs=input_textbox, outputs=output_html)
 
 if __name__ == "__main__":
     demo.launch()