show chunk in colors.

app.py

@@ -1,15 +1,33 @@
 import tiktoken
 import gradio as gr
 
+color_map = {
+    '0': '#ccbfee',
+    '1': '#beedc6',
+    '2': '#f4d7ab',
+    '3': '#f4aeb1',
+    '4': '#a4dcf3',
+}
+
+def gen_num():
+    n = 0
+    while True:
+        yield str(n)
+        n = (n + 1) % 5
+
 def tokens_len(prompt, model):
     encoder = tiktoken.encoding_for_model(model)
     tokens = encoder.encode(prompt)
-    return len(tokens)
+    return (len(tokens),
+           [(encoder.decode([token]), category) for 
+            token, category in zip(tokens, gen_num())])
 
 web_tokenizer = gr.Interface(
     fn = tokens_len,
     inputs = [
-        gr.Textbox(label='輸入提示文字'),
+        gr.Textbox(
+            label='輸入提示文字',
+            lines=6),
         gr.Dropdown(
             label='模型名稱',
             choices = [
@@ -21,7 +39,11 @@ web_tokenizer = gr.Interface(
             value='gpt-4o-mini')
     ],
     outputs = [
-        gr.Number(label='Token 數量：')
+        gr.Number(label='Token 數量：'),
+        gr.Highlightedtext(
+            label='切割結果：', 
+            color_map = color_map,
+            show_inline_category=False)
     ]
 )