Update app.py

app.py

@@ -5,16 +5,18 @@ chart_html = gr.HTML(label="Token Frequency Chart")
 
 # Define a function to tokenize text and create visualization
 def tokenize_text(text, tokenizer_name):
-  tokenizer = AutoTokenizer.from_pretrained(tokenizer_name)
-  tokenized_text = tokenizer.tokenize(text)
-  input_ids = tokenizer.convert_tokens_to_ids(tokenized_text)
-  decoded_text = tokenizer.decode(input_ids)
+    tokenizer = AutoTokenizer.from_pretrained(tokenizer_name)
+    tokenized_text = tokenizer.tokenize(text)
+    input_ids = tokenizer.convert_tokens_to_ids(tokenized_text)
+    decoded_text = tokenizer.decode(input_ids)
 
-  # Create visualization HTML
-  chart_html = create_token_frequency_chart(tokenized_text)
-
-  return f"Tokenized Text: {tokenized_text}\nInput IDs: {input_ids}\nDecoded Text: {decoded_text}", chart_html
+    # Create visualization HTML
+    chart_html = create_token_frequency_chart(tokenized_text)
 
+    return (
+        f"Tokenized Text: {tokenized_text}\nInput IDs: {input_ids}\nDecoded Text: {decoded_text}",
+        chart_html,
+    )
 
 
 # Define available tokenizers
@@ -38,7 +40,12 @@ iface = gr.Interface(
     gr.Textbox(label="Enter Text"),
     gr.Dropdown(choices=tokenizer_names, label="Select Tokenizer"),
   ],
-  outputs="text",
+  outputs=[
+    gr.Textbox(label="Tokenized Text"),
+    gr.Textbox(label="Input IDs"),
+    gr.Textbox(label="Decoded Text"),
+    gr.HTML(label="Token Frequency Chart"),  # Include chart_html
+]
   title="Kalemat: Explore Arabic Tokenizers",
   description="This interactive tool allows you to experiment with different Arabic tokenizers and see how they break down text into individual units. Try out various tokenizers and observe the tokenized form, input IDs, and decoded text to gain insights into the tokenization process",
 )