Visualization automatic Highlight

app.py

@@ -7,18 +7,18 @@ nlp_qa = pipeline(
     tokenizer='mrm8488/bert-italian-finedtuned-squadv1-it-alfa'
 )
 
-def get_colored_text(response, context):
-    colored_string = context[:response['start']] + \
-        '<span style="color:blue">' + context[response['start']:response['end']] + '</span>' + \
-        context[response['end']:]
-    return colored_string
-
 def start(question, context):
     response = nlp_qa({
         'question': question,
         'context': context
     })
-    return  get_colored_text(response, context), response['answer'], {response['answer']: response['score']}
+    text_hilight_output = [
+        (context[:response['start']], None),
+        (context[response['start']:response['end']], 'Answer'),
+        (context[response['end']:], None)
+
+    ]
+    return  text_hilight_output, response['answer'], {response['answer']: response['score']}
 
 face = gr.Interface(
     fn=start, 
@@ -27,7 +27,7 @@ face = gr.Interface(
         gr.inputs.Textbox(lines=10, placeholder="Context Here… ")
     ], 
     outputs=[
-        gr.outputs.HTML(label='Context'),
+        gr.outputs.HighlightedText(label='Context'),
         gr.outputs.Textbox(label="Answer"), 
         gr.outputs.Label(num_top_classes=1, label='Score'), 
     ]