Added highlighted text

app.py

@@ -15,13 +15,15 @@ description = """
  </div>
 """
 
-diction_text = """
+diction_text = "How now brown cow"
+
+test_text = f"""
     <div>
-        <p>How now brown cow</p>
+        <p>{diction_text}</p>
     </div>
 """
 
-diction = gr.HTML(diction_text)
+diction = gr.HTML(test_text)
 
 
 device = "cpu"
@@ -52,15 +54,32 @@ pipe = pipeline(
 )
 
 
+def diff_texts(audio_input: str):
+    test_text = diction_text
+    d = Differ()
+
+    return [
+        (token[2:], token[0] if token[0] != "" else None)
+        for token in d.compare(test_text, audio_input)
+    ]
+
+
 def transcribe_audio(audio):
     result = pipe(audio)
     print(f'TRANSCRIPTION {result["text"]}')
-    try:
-        for r in result:
-            print(r)
-    except:
-        print("ERROR")
-    return result
+    diff_text = diff_texts(result["text"])
+
+    print("diff", diff_text)
+
+    return diff_text
+
+
+highlighted_results = gr.HighlightedText(
+    label="Diff",
+    combine_adjacent=True,
+    show_legend=True,
+    color_map={"+": "red", "-": "green"},
+)
 
 
 input_audio = gr.Audio(
@@ -76,7 +95,7 @@ input_audio = gr.Audio(
 demo = gr.Interface(
     fn=transcribe_audio,
     inputs=[diction, input_audio],
-    outputs="text",
+    outputs=highlighted_results,
     title="Test your diction",
     description=description,
     theme="abidlabs/Lime",