Update app.py

app.py

@@ -29,35 +29,32 @@ def compare_tokenizers(tokenizer_name, text):
     # Prepare the results to be displayed
     results = [(tokenizer_name, tokens, encoded_output, decoded_text)]
     return results
-
-# Define the Gradio interface components with a dropdown for model selection
 inputs_component = [
     gr.Dropdown(choices=tokenizer_options, label="Select Tokenizer"),
     gr.Textbox(lines=2, placeholder="Enter Arabic text here...", label="Input Text")
 ]
 
-# Custom CSS to make the dataframe bigger
-custom_css = '''
-<style>
-    .output_dataframe .dataframe {
-        width: auto !important; /* Adjust the width as needed, or use 'auto' */
-        font-size: 16px; /* Increase font size */
-    }
-    .output_dataframe .dataframe tbody tr td {
-        padding: 12px !important; /* Increase padding for table cells */
-    }
-</style>
-'''
-
-outputs_component = gr.Dataframe(headers=["Tokenizer", "Tokens", "Encoded Output", "Decoded Text"], 
-                                label="Results", 
-                                css=custom_css)
-
-# Setting up the interface
-iface = Interface(fn=compare_tokenizers, 
-                  inputs=inputs_component, 
-                  outputs=outputs_component, 
-                  title="AraNizer Tokenizer Comparison")
+# Define the outputs component normally without the 'css' parameter
+outputs_component = gr.Dataframe(headers=["Tokenizer", "Tokens", "Encoded Output", "Decoded Text"], label="Results")
+
+# Applying a theme to modify global styles including font size, which might affect readability across components 
+custom_theme = theme.Theme(
+    # Adjust the primary colors, text sizes, spaces, etc., as necessary
+    font_size={
+        'small_text': 16,
+        'text': 18,
+        'big_text': 20,
+        'header': 24,
+    },
+    # Further theme adjustments can be made as needed
+)
+
+# Setting up the interface with the custom theme
+iface = Interface(fn=compare_tokenizers,
+                  inputs=inputs_component,
+                  outputs=outputs_component,
+                  title="AraNizer Tokenizer Comparison",
+                  theme=custom_theme)
 
 # Launching the Gradio app
-iface.launch()
+iface.launch()