Correct app.py

app.py

@@ -13,54 +13,202 @@ nlp = spacy.load(os.path.join(model_path, 'model-best'))
 if 'parser' not in nlp.pipe_names and 'senter' not in nlp.pipe_names:
     nlp.add_pipe('sentencizer')
 
-# Define the inline color mapping for each ASC tag.
-color_scheme = {
-    "ATTR": "#f6e9e9",      # Light Red
-    "INTRAN_S": "#e7957f",   # Light Blue
-    "INTRAN_MOT": "#f6f6aa", # Light Green
-    "INTRAN_RES": "#f0aed6", # Light Yellow
-    "CAUS_MOT": "#cdefb5",   # Light Pink
-    "TRAN_S": "#a0d4f7",     # Light Blue
-    "TRAN_RES": "#c7aefa",   # Light Purple
-    "DITRAN": "#b3f0f7",     # Light Teal
-    "PASSIVE": "#c3c0c0"     # Light Gray
-}
-
 def get_highlighted_text(doc):
     """
-    Wraps detected ASCs in each sentence with a span tag containing an inline style.
-    In addition, appends the entity's tag name in an extra span so the label is always visible.
+    Wraps detected ASCs in each sentence with a <span> tag that carries the entity tag as a
+    data attribute. The output HTML is wrapped with a CSS <style> block that applies your desired styling.
     """
     highlighted_sentences = []
     for sent in doc.sents:
-        s = sent.text
-        # Find all entities fully contained within this sentence.
+        text = sent.text
+        # Find all entities that are 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 the character offsets remain valid.
+            # Process entities in reverse order so that 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 based on the tag; default to light gray if not found.
-                color = color_scheme.get(ent.label_, "#cccccc")
-                # 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'<span style="display:inline-block; vertical-align: super; font-size: 0.8em; margin-left: 2px; color: black;">{ent.label_}</span>'
+                # Wrap the detected entity with a span and include its tag via the data-entity attribute.
+                text = (
+                    text[:ent_start]
+                    + f'<span class="entity" data-entity="{ent.label_}">'
+                    + text[ent_start:ent_end]
                     + '</span>'
-                    + s[ent_end:]
+                    + text[ent_end:]
                 )
-        highlighted_sentences.append(s)
-    # Combine sentences with HTML breaks.
-    return "<br><br>".join(highlighted_sentences)
+        highlighted_sentences.append(text)
+    result = "<br><br>".join(highlighted_sentences)
+    
+    # Embed the provided CSS for styling.
+    style = """
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f4f4f4;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        p, textarea, input {
+            font-size: 0.9rem;
+            font-weight: 400;
+        }
+        .info {
+            font-size: 0.9rem;
+            color: #333;
+        }
+        .accuracy-highlight {
+            color: #007030;
+            font-weight: bold;
+        }
+        input[type="submit"], input[type="button"] {
+            font-size: 0.9rem;
+        }
+        textarea {
+            width: 95%;
+            max-width: 95%; /* Ensure textarea doesn't exceed the container */
+            padding: 20px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            resize: vertical; /* Allow vertical resizing */
+        }
+        input[type="submit"], input[type="button"] {
+            background-color: #007030;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-right: 10px; /* Add some space between buttons */
+        }
+        input[type="submit"]:hover, input[type="button"]:hover {
+            background-color: #45a049;
+        }
+        .results {
+            margin-top: 20px;
+            line-height: 2.5;
+        }
+        .tag-counts {
+            margin-top: 2px;
+            text-align: center;
+        }
+        .tag-counts h2 {
+            margin-bottom: 5px;
+            text-align: left;
+        }
+        .entity {
+            display: inline-block;
+            border: none;
+            border-radius: 2px;
+            padding: 2px 5px;
+            margin: 0 4px;
+            position: relative;
+            white-space: nowrap;
+            line-height: 1.2;
+            font-size: 0.8em;
+        }
+        /* Highlight background colors for entity types */
+        .entity[data-entity="ATTR"] {
+            background-color: #f6e9e9;  /* Light Red */
+        }
+        .entity[data-entity="INTRAN_S"] {
+            background-color: #e7957f;  /* Light Blue */
+        }
+        .entity[data-entity="INTRAN_MOT"] {
+            background-color: #f6f6aa;  /* Light Green */
+        }
+        .entity[data-entity="INTRAN_RES"] {
+            background-color: #f0aed6;  /* Light Yellow */
+        }
+        .entity[data-entity="CAUS_MOT"] {
+            background-color: #cdefb5;  /* Light Pink */
+        }
+        .entity[data-entity="TRAN_S"] {
+            background-color: #a0d4f7;  /* Light Blue */
+        }
+        .entity[data-entity="TRAN_RES"] {
+            background-color: #c7aefa;  /* Light Purple */
+        }
+        .entity[data-entity="DITRAN"] {
+            background-color: #b3f0f7;  /* Light Teal */
+        }
+        .entity[data-entity="PASSIVE"] {
+            background-color: #c3c0c0;  /* Light Gray */
+        }
+        /* Default style if the entity type is not specified */
+        .entity[data-entity=""] {
+            background-color: #cccccc;  /* Light Gray */
+        }
+        /* Darker background colors for the entity label tooltips */
+        .entity[data-entity="ATTR"]::after {
+            background-color: #d29997;  /* Darker Red */
+        }
+        .entity[data-entity="INTRAN_S"]::after {
+            background-color: #ec6161;  /* Darker Orange */
+        }
+        .entity[data-entity="INTRAN_MOT"]::after {
+            background-color: #ebab22;  /* Darker Green */
+        }
+        .entity[data-entity="INTRAN_RES"]::after {
+            background-color: #be5791;  /* Darker Purple */
+        }
+        .entity[data-entity="CAUS_MOT"]::after {
+            background-color: #007030;  /* Darker Green */
+        }
+        .entity[data-entity="TRAN_S"]::after {
+            background-color: #3085ce;  /* Darker Blue */
+        }
+        .entity[data-entity="TRAN_RES"]::after {
+            background-color: #8268cf;  /* Darker Purple */
+        }
+        .entity[data-entity="DITRAN"]::after {
+            background-color: #449cbb;  /* Darker Teal */
+        }
+        .entity[data-entity="PASSIVE"]::after {
+            background-color: #6b6b6b;  /* Darker Gray */
+        }
+        /* Default darker tooltip if the entity type is not specified */
+        .entity[data-entity=""]::after {
+            background-color: #888888;  /* Darker Gray */
+        }
+        /* Styling for the entity label tooltip */
+        .entity::after {
+            content: attr(data-entity);
+            position: absolute;
+            bottom: -2em;
+            left: 0;
+            right: 0;
+            color: #fff;  /* White text */
+            font-size: 0.7em;
+            padding: 2px 4px;
+            border-radius: 2px;
+            text-align: center;
+            min-width: 50px;
+            white-space: nowrap;
+        }
+    </style>
+    """
+    return style + "<div class='container'>" + result + "</div>"
 
 def process_text(input_text):
     """
     Process input text to detect and tag ASCs.
-    Returns an HTML string with inline styles applied to each entity.
+    Returns an HTML string with styles applied.
     """
     if not input_text.strip():
         return "No text provided. Please enter some text."
@@ -75,55 +223,24 @@ def process_text(input_text):
     
     return get_highlighted_text(doc)
 
-# Define the sample text to be injected.
-sample_text = (
-    "Once upon a time in a small, enchanted village nestled between towering mountains, there lived a baker named Oliver. "
-    "But this wasn't just any baker—Oliver had a magical secret. Every loaf of bread he baked had the power to grant a wish, "
-    "but only if it was made with true joy in his heart. The villagers adored Oliver’s bread, though they had no idea about its magic. "
-    "They just knew it tasted unlike anything else—warm, soft, and with a hint of something... extraordinary. Only a few people had ever discovered "
-    "its secret, and even fewer had made wishes, because the key was in asking for something truly selfless. "
-    "One crisp autumn morning, a traveling musician named Lyla passed through the village. She had a worn-out lute, tattered clothes, "
-    "and a bright spark of hope in her eyes despite her hardships. Drawn by the smell of freshly baked bread, she wandered into Oliver’s bakery. "
-    "Oliver, busy dusting flour off his hands, smiled warmly. “What can I do for you?” he asked. "
-    "Lyla’s stomach growled in response, and she laughed, a sound as melodic as her lute playing. “Just one loaf of bread, please,” she said, "
-    "placing a single coin on the counter, all she had left. "
-    "Oliver, feeling the joy in the simple act of serving someone in need, baked the loaf with care. As the bread came out of the oven, a golden glow "
-    "shimmered around it for just a moment. Lyla didn’t notice, but Oliver did, and he smiled to himself. "
-    "As Lyla took her first bite outside the shop, she felt warmth spread through her whole being. She thought of how she missed playing her lute to "
-    "cheer others up, but it was broken and beyond repair. Without knowing the magic at work, she whispered under her breath, 'I just wish I could bring "
-    "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 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 "
-    "bread had once again brought a little bit of magic to the world. "
-    "And so, every day after that, Lyla would play her magical lute in the village square, bringing joy to everyone who heard her music. People came from "
-    "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. "
-    "(Generated by ChatGPT 4o 🤖)"
-)
+# Define sample text
+sample_text = "Nancy sliced the tire open."
 
-def fill_sample_text():
-    return sample_text
+#def fill_sample_text():
+#    return 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 sample text.")
+    gr.Markdown("This demo version of the Argument Structure Construction (ASC) tagger processes sentences and identifies nine types of ASCs. The identified ASCs are highlighted in the output text.")
     
-    input_textbox = gr.Textbox(lines=10, label="Input Text", placeholder="Enter text here...")
+    input_textbox = gr.Textbox(lines=5, label="Input Text", placeholder="Enter text here...")
     output_html = gr.HTML(label="Tagged 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.
+    tag_btn = gr.Button("Tag ASCs")
+    
     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()