Repository: gradio-app/gradio

Issue:
Display bug with the version gradio 2.7.0 on HighlightedText
**Describe the bug**
I did describe the bug with notebook and screenshots in the Hugging Face forum: https://discuss.huggingface.co/t/how-to-install-a-specific-version-of-gradio-in-spaces/13552

**To Reproduce**
Run the notebook [diff_texts.ipynb](https://colab.research.google.com/drive/1NPdrvEVzt03GUrWVHGQGDx4TB0ZLPus6?usp=sharing).

**Screenshots**

With gradio 2.7.0
![With gradio 2.7.0](https://aws1.discourse-cdn.com/standard14/uploads/hellohellohello/optimized/2X/8/88007875c8bc66626c13c80a88791abfef6d3397_2_1380x694.png)

With gradio 2.6.4
![With gradio 2.6.4](https://aws1.discourse-cdn.com/standard14/uploads/hellohellohello/optimized/2X/7/7f0a95e88c9a31f2814b8f757cca6e10b0cc6e99_2_1380x598.png)



Discussion:
Thank you for raising the issue! We are fixing this issue right now
Thanks again for creating the issue. In case you need a workaround while we fix the issue, you can just run `gr.outputs.HighlightedText()` without passing in a custom `color_map` and it should work fine
The issue happens when you pass in a custom `color_map` to  `gr.outputs.HighlightedText()`. 

**Working example**:

```python
def diff_texts(text1, text2):
    d = Differ()
    return [
        (token[2:], token[0] if token[0] != " " else None)
        for token in d.compare(text1, text2)
    ]


iface = gr.Interface(
    diff_texts,
    [
        gr.inputs.Textbox(
            lines=3, default="The quick brown fox jumped over the lazy dogs."
        ),
        gr.inputs.Textbox(lines=3, default="The fast brown fox jumps over lazy dogs."),
    ],
    gr.outputs.HighlightedText(),
)
```

![image](https://user-images.githubusercontent.com/1778297/155317273-f6bea53e-b1cd-46cc-a0bc-cfc798b1a318.png)

**Broken example**:

```python
def diff_texts(text1, text2):
    d = Differ()
    return [
        (token[2:], token[0] if token[0] != " " else None)
        for token in d.compare(text1, text2)
    ]


iface = gr.Interface(
    diff_texts,
    [
        gr.inputs.Textbox(
            lines=3, default="The quick brown fox jumped over the lazy dogs."
        ),
        gr.inputs.Textbox(lines=3, default="The fast brown fox jumps over lazy dogs."),
    ],
    gr.outputs.HighlightedText(color_map={'+': 'brown', '-': 'pink'}),
)
```

in which case the words that being highlighted no longer appear:

![image](https://user-images.githubusercontent.com/1778297/155317600-f212c94e-f518-4bff-b8c5-70ac45425147.png)



Resolving patch:
diff --git a/demo/diff_texts/run.py b/demo/diff_texts/run.py
--- a/demo/diff_texts/run.py
+++ b/demo/diff_texts/run.py
@@ -19,7 +19,7 @@ def diff_texts(text1, text2):
         ),
         gr.inputs.Textbox(lines=3, default="The fast brown fox jumps over lazy dogs."),
     ],
-    gr.outputs.HighlightedText(),
+    gr.outputs.HighlightedText(color_map={'+': 'green', '-': 'pink'}),
 )
 if __name__ == "__main__":
     iface.launch()


Test patch:
diff --git a/test/golden/diff_texts/magic_trick.png b/test/golden/diff_texts/magic_trick.png
Binary files a/test/golden/diff_texts/magic_trick.png and b/test/golden/diff_texts/magic_trick.png differ