Move to Blocks

app.py

@@ -18,7 +18,9 @@ default_template = """{% for message in messages %}
     {{ "<|im_start|>assistant\\n" }}
 {% endif %}"""
 
-description_text = """### This space is a helper app for writing [Chat Templates](https://huggingface.co/docs/transformers/main/en/chat_templating).
+description_text = """# Chat Template Creator
+
+### This space is a helper app for writing [Chat Templates](https://huggingface.co/docs/transformers/main/en/chat_templating).
 
 ### When you're happy with the outputs from your template, you can use the code block at the end to add it to a PR!"""
 
@@ -38,18 +40,39 @@ def apply_chat_template(template, test_conversation, add_generation_prompt, clea
     formatted = tokenizer.apply_chat_template(conversation, tokenize=False, add_generation_prompt=add_generation_prompt)
     return formatted, pr_snippet
 
-iface = gr.Interface(
-    description=description_text,
-    fn=apply_chat_template,
-    inputs=[
-        gr.TextArea(value=default_template, lines=10, max_lines=30, label="Chat Template"),
-        gr.TextArea(value=demo_conversation, lines=6, label="Conversation"),
-        gr.Checkbox(value=False, label="Add generation prompt"),
-        gr.Checkbox(value=True, label="Cleanup template whitespace"),
-    ],
-    outputs=[
-        gr.TextArea(label="Formatted conversation"),
-        gr.TextArea(label="Code snippet to create PR", lines=3, show_label=True, show_copy_button=True)
-    ]
-)
-iface.launch()
+with gr.Blocks():
+
+    gr.MarkDown(description_text)
+
+    with gr.Row():
+        with gr.Column():
+            template_in = gr.TextArea(value=default_template, lines=10, max_lines=30, label="Chat Template")
+            conversation_in = gr.TextArea(value=demo_conversation, lines=6, label="Conversation")
+            generation_prompt_check = gr.Checkbox(value=False, label="Add generation prompt")
+            cleanup_whitespace_check = gr.Checkbox(value=True, label="Cleanup template whitespace")
+            submit = gr.Button("Apply template")
+        with gr.Column():
+            formatted_out = gr.TextArea(label="Formatted conversation")
+            code_snippet_out = gr.TextArea(label="Code snippet to create PR", lines=3, show_label=True, show_copy_button=True)
+        btn.click(fn=apply_chat_template, 
+                  inputs=(template_in, conversation_in, generation_prompt_check, cleanup_whitespace_check),
+                  outputs=(formatted_out, code_snippet_out
+                  )
+
+demo.launch()
+
+#iface = gr.Interface(
+#    description=description_text,
+#    fn=apply_chat_template,
+#    inputs=[
+#        gr.TextArea(value=default_template, lines=10, max_lines=30, label="Chat Template"),
+#        gr.TextArea(value=demo_conversation, lines=6, label="Conversation"),
+#        gr.Checkbox(value=False, label="Add generation prompt"),
+#        gr.Checkbox(value=True, label="Cleanup template whitespace"),
+#    ],
+#    outputs=[
+#        gr.TextArea(label="Formatted conversation"),
+#        gr.TextArea(label="Code snippet to create PR", lines=3, show_label=True, show_copy_button=True)
+#    ]
+#)
+#iface.launch()