Update app.py

app.py

@@ -70,12 +70,16 @@ def compare_tokenizers(tokenizer_name, text):
     decoded_text = tokenizer.decode(encoded_output, skip_special_tokens=True)
 
     # Prepare the results to be displayed in HTML format
+    tokens_html = "".join([f"<span style='background-color:#D3D3D3; padding:2px; margin:2px; border-radius:5px;'>{token}</span>" for token in tokens])
+    encoded_html = "".join([f"<span style='background-color:#ADD8E6; padding:2px; margin:2px; border-radius:5px;'>{token}</span>" for token in encoded_output])
+    decoded_html = f"<div style='background-color:#90EE90; padding:10px; border-radius:5px;'>{decoded_text}</div>"
+
     results_html = f"""
-    <div>
+    <div style='font-family: Arial, sans-serif;'>
         <h3>Tokenizer: {tokenizer_name}</h3>
-        <p><strong>Tokens:</strong> {tokens}</p>
-        <p><strong>Encoded:</strong> {encoded_output}</p>
-        <p><strong>Decoded:</strong> {decoded_text}</p>
+        <p><strong>Tokens:</strong> {tokens_html}</p>
+        <p><strong>Encoded:</strong> {encoded_html}</p>
+        <p><strong>Decoded:</strong> {decoded_html}</p>
     </div>
     """
     return results_html