UI updates

app.py

@@ -75,16 +75,19 @@ examples = {
 }
 
 with gr.Blocks() as demo:
-    tokenizer_search_1 = HuggingfaceHubSearch(
-        label="Search Huggingface Hub for Tokenizer 1",
-        placeholder="Search for Tokenizer 1",
-        search_type="model"
-    )
-    tokenizer_search_2 = HuggingfaceHubSearch(
-        label="Search Huggingface Hub for Tokenizer 2",
-        placeholder="Search for Tokenizer 2",
-        search_type="model"
-    )
+    with gr.Row():
+        with gr.Column():
+            tokenizer_search_1 = HuggingfaceHubSearch(
+                label="Search Huggingface Hub for Tokenizer 1",
+                placeholder="Search for Tokenizer 1",
+                search_type="model"
+            )
+        with gr.Column():
+            tokenizer_search_2 = HuggingfaceHubSearch(
+                label="Search Huggingface Hub for Tokenizer 2",
+                placeholder="Search for Tokenizer 2",
+                search_type="model"
+            )
     
     example_dropdown = gr.Dropdown(label="Select Example", choices=list(examples.keys()), value="Example 1")
     input_text = gr.Textbox(label="Input Text", lines=5)
@@ -92,13 +95,20 @@ with gr.Blocks() as demo:
     with gr.Accordion("Hugging Face Token (Optional)", open=False):
         hf_token = gr.Textbox(label="Hugging Face Token", placeholder="Enter HF token if needed for private tokenizers")
     
-    tokenized_output_1 = gr.HTML(label="Tokenizer 1 - Tokenized Text")
-    token_count_label_1 = gr.Label(label="Tokenizer 1 - Token Count and Word Count")
-    utf8_output_1 = gr.HTML(label="Tokenizer 1 - UTF-8 Decoded Text")
-    
-    tokenized_output_2 = gr.HTML(label="Tokenizer 2 - Tokenized Text")
-    token_count_label_2 = gr.Label(label="Tokenizer 2 - Token Count and Word Count")
-    utf8_output_2 = gr.HTML(label="Tokenizer 2 - UTF-8 Decoded Text")
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("### Tokenizer 1 Outputs")
+            tokenized_output_1 = gr.HTML(label="Tokenizer 1 - Tokenized Text")
+            token_count_label_1 = gr.Label(label="Tokenizer 1 - Token Count and Word Count")
+            with gr.Accordion("Tokenizer 1 - UTF-8 Decoded Text", open=False):
+                utf8_output_1 = gr.HTML(label="Tokenizer 1 - UTF-8 Decoded Text")
+        
+        with gr.Column():
+            gr.Markdown("### Tokenizer 2 Outputs")
+            tokenized_output_2 = gr.HTML(label="Tokenizer 2 - Tokenized Text")
+            token_count_label_2 = gr.Label(label="Tokenizer 2 - Token Count and Word Count")
+            with gr.Accordion("Tokenizer 2 - UTF-8 Decoded Text", open=False):
+                utf8_output_2 = gr.HTML(label="Tokenizer 2 - UTF-8 Decoded Text")
     
     example_dropdown.change(fn=lambda x: fill_example_text(examples[x]), inputs=example_dropdown, outputs=input_text)