update font & example

app.py

@@ -47,11 +47,37 @@ class NERDemo:
     def create_demo(self) -> gr.Interface:
         """Create and configure the Gradio interface"""
 
-        with gr.Blocks(theme=gr.themes.Soft()) as demo:
-            gr.Markdown("# Multilingual Named Entity Recognition")
-            gr.Markdown(
-                "This demo uses XLM-RoBERTa model fine-tuned for NER tasks in multiple languages."
-            )
+        theme = gr.themes.Base(
+            primary_hue="blue",
+            secondary_hue="slate",
+            font=gr.themes.GoogleFont("Source Sans Pro"),
+            neutral_hue="slate",
+        ).set(
+            body_text_color="*neutral_950",
+            block_background_fill="*neutral_50",
+            block_border_width="0px",
+            button_primary_background_fill="*primary_500",
+            button_primary_background_fill_hover="*primary_600",
+            button_primary_text_color="white",
+            input_background_fill="white",
+            block_radius="lg",
+        )
+
+        with gr.Blocks(theme=theme) as demo:
+            with gr.Row():
+                gr.HTML(
+                    """
+                    <div style="text-align: center; max-width: 800px; margin: 0 auto; padding: 1rem; font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial', sans-serif;">
+                        <h1 style="color: #374151; font-size: 2.5rem; font-weight: 600; margin-bottom: 0.5rem;">
+                            Multilingual Named Entity Recognition
+                        </h1>
+                        <p style="color: #6B7280; font-size: 1.1rem; line-height: 1.5; margin-top: 0.5rem;">
+                            This demo uses XLM-RoBERTa model fine-tuned for NER tasks in multiple languages.
+                            Automatically detects and highlights named entities such as persons, organizations, locations, and more.
+                        </p>
+                    </div>
+                    """
+                )
 
             with gr.Row():
                 with gr.Column(scale=3):
@@ -71,9 +97,17 @@ class NERDemo:
 
                 with gr.Column(scale=2):
                     with gr.Group():
-                        gr.Markdown("### Entity Statistics")
+                        gr.HTML(
+                            """
+                            <div style="margin-bottom: 1rem;">
+                                <h3 style="color: #374151; font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">
+                                    Entity Statistics
+                                </h3>
+                            </div>
+                            """
+                        )
                         stats_output = gr.Json(label="Detected Entities")
-                        time_output = gr.Markdown()
+                        time_output = gr.Markdown(elem_classes="text-sm text-gray-600")
 
             highlighted_output = gr.HighlightedText(
                 label="Detected Entities", show_legend=True
@@ -81,15 +115,28 @@ class NERDemo:
 
             # Example inputs
             examples = [
-                ["My name is Tim and I live in California", "English"],
-                ["Ich arbeite bei Google in Berlin", "German"],
+                [
+                    "Emma Watson starred in Harry Potter and studied at Oxford University while working with United Nations.",
+                    "English",
+                ],
+                [
+                    "Die Deutsche Bank hat ihren Hauptsitz in Frankfurt, während BMW in München produziert.",
+                    "German",
+                ],
                 [
                     "Enes Fehmi Manan, İzmir'de yaşıyor ve Fibababanka'da çalışıyor.",
                     "Turkish",
                 ],
-                ["Pierre habite à Paris et travaille chez Microsoft.", "French"],
-                ["María trabaja en Amazon en Madrid.", "Spanish"],
+                [
+                    "Le Louvre à Paris expose la Joconde de Leonardo da Vinci depuis le XIXe siècle.",
+                    "French",
+                ],
+                [
+                    "El Real Madrid jugará contra el Barcelona en el Santiago Bernabéu el próximo mes.",
+                    "Spanish",
+                ],
             ]
+
             gr.Examples(examples, inputs=[text_input, language])
 
             # Event handlers
@@ -113,6 +160,7 @@ class NERDemo:
         return demo
 
 
-ner_demo = NERDemo()
-demo = ner_demo.create_demo()
-demo.launch(share=True)
+if __name__ == "__main__":
+    ner_demo = NERDemo()
+    demo = ner_demo.create_demo()
+    demo.launch(share=True)