Update app.py

app.py

@@ -50,9 +50,16 @@ def compare_tokenizers(tokenizer_name, text):
         decoded_text = tokenizer.decode(encoded_output)
         tokens_arabic = [token.encode('utf-8').decode('utf-8') for token in tokens]
     
-    # Prepare the results to be displayed
-    results = [(tokenizer_name, tokens_arabic, encoded_output, decoded_text)]
-    return results
+    # Prepare the results to be displayed in HTML format
+    results_html = f"""
+    <div>
+        <h3>Tokenizer: {tokenizer_name}</h3>
+        <p><strong>Tokens:</strong> {tokens_arabic}</p>
+        <p><strong>Encoded:</strong> {encoded_output}</p>
+        <p><strong>Decoded:</strong> {decoded_text}</p>
+    </div>
+    """
+    return results_html
 
 # Define the Gradio interface components with a dropdown for model selection
 inputs_component = [
@@ -60,11 +67,7 @@ inputs_component = [
     gr.Textbox(lines=2, placeholder="اكتب النص هنا...", label="Input Text")
 ]
 
-outputs_component = gr.Dataframe(
-    headers=["Tokenizer", "Tokens", "Encoded", "Decoded"], 
-    label="Results",
-    type="pandas"
-)
+outputs_component = gr.HTML(label="Results")
 
 # Setting up the interface
 iface = Interface(