Fix UI issues and improve model presentation accuracy

The interface had critical usability problems that prevented effective use
of the demo. The dark mode was rendering checkboxes invisible and making
the interface hard to read. Additionally, the performance qualifiers
(Snelste/Beste kwaliteit/Gebalanceerd) were misleading users since all
three models have nearly identical SARI scores (66.44-67.80).

This commit resolves these issues by:
- Switching to Default light theme to ensure consistent visibility
- Adding full 'Leesplank Noot' branding to model names for clarity
- Removing misleading performance qualifiers that suggest false differences
- Simplifying to Dutch-only interface as this is a Dutch-specific tool
- Improving layout with clickable example cards in a two-column design

These changes make the demo more honest about model capabilities and more
usable for its target audience of Dutch government communication teams.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -8,9 +8,9 @@ import random
 
 # Model configurations - ordered as requested
 MODEL_ORDER = [
-    ("EuroLLM-1.7b", "UWV/leesplank-noot-eurollm-1.7b"),
-    ("Granite-3.3-2b", "UWV/leesplank-noot-granite-3.3-2b"),
-    ("Llama-3.2-3b", "UWV/leesplank-noot-llama-3.2-3b")
+    ("Leesplank Noot EuroLLM-1.7b", "UWV/leesplank-noot-eurollm-1.7b"),
+    ("Leesplank Noot Granite-3.3-2b", "UWV/leesplank-noot-granite-3.3-2b"),
+    ("Leesplank Noot Llama-3.2-3b", "UWV/leesplank-noot-llama-3.2-3b")
 ]
 
 # System prompt for Llama and Granite models
@@ -115,7 +115,7 @@ def simplify_text_sequential(text: str, selected_models: List[str]):
     """Simplify text using multiple models sequentially with progressive updates"""
 
     if not text.strip():
-        empty_result = "Voer tekst in om te vereenvoudigen / Enter text to simplify"
+        empty_result = "Voer tekst in om te vereenvoudigen"
         yield (empty_result, "") + ("", "") * 2
         return
 
@@ -123,7 +123,7 @@ def simplify_text_sequential(text: str, selected_models: List[str]):
     models_to_run = [(name, path) for name, path in MODEL_ORDER if name in selected_models]
 
     if not models_to_run:
-        empty_result = "Selecteer minstens één model / Select at least one model"
+        empty_result = "Selecteer minstens één model"
         yield (empty_result, "") + ("", "") * 2
         return
 
@@ -132,12 +132,12 @@ def simplify_text_sequential(text: str, selected_models: List[str]):
     for name, _ in MODEL_ORDER:
         if name in selected_models:
             results[name] = {
-                "text": "⏳ Wachten op verwerking / Waiting for processing...",
+                "text": "⏳ Wachten op verwerking...",
                 "metrics": ""
             }
         else:
             results[name] = {
-                "text": "Model niet geselecteerd / Model not selected",
+                "text": "Model niet geselecteerd",
                 "metrics": ""
             }
 
@@ -155,7 +155,7 @@ def simplify_text_sequential(text: str, selected_models: List[str]):
     # Run models sequentially and update progressively
     for name, path in models_to_execute:
         # Update status to processing
-        results[name]["text"] = "🔄 Verwerken / Processing..."
+        results[name]["text"] = "🔄 Verwerken..."
 
         # Yield current state
         output_tuple = []
@@ -197,118 +197,119 @@ def simplify_text_sequential(text: str, selected_models: List[str]):
 def create_interface():
     """Create Gradio interface with enhanced UX"""
 
-    # Enhanced color scheme with salmon/peach accents
-    uwv_theme = gr.themes.Base(
-        primary_hue=gr.themes.Color(
-            c50="#E8F4F8",
-            c100="#C7E9F1",
-            c200="#99D4E4",
-            c300="#66B1CF",
-            c400="#3397BF",
-            c500="#01689B",
-            c600="#01547D",
-            c700="#01405F",
-            c800="#002B41",
-            c900="#001623",
-            c950="#000B12"
-        ),
-        secondary_hue=gr.themes.Color(
-            c50="#FFF4E6",
-            c100="#FFE9CC",
-            c200="#FCE1BF",
-            c300="#FFBC66",
-            c400="#FFA633",
-            c500="#E17000",
-            c600="#B45A00",
-            c700="#874400",
-            c800="#5A2D00",
-            c900="#2D1700",
-            c950="#170B00"
-        ),
+    # Use Default theme which is light by default
+    uwv_theme = gr.themes.Default(
+        primary_hue=gr.themes.colors.blue,
         font=[gr.themes.GoogleFont("Open Sans"), "Arial", "sans-serif"]
     ).set(
-        body_background_fill="#E8F4F8",
+        body_background_fill="#FFFFFF",
+        body_background_fill_dark="#FFFFFF",
+        background_fill_primary="#F7F9FB",
+        background_fill_primary_dark="#F7F9FB",
+        background_fill_secondary="#FFFFFF",
+        background_fill_secondary_dark="#FFFFFF",
         button_primary_background_fill="#01689B",
+        button_primary_background_fill_dark="#01689B",
         button_primary_background_fill_hover="#01547D",
+        button_primary_background_fill_hover_dark="#01547D",
+        button_primary_text_color="#FFFFFF",
+        button_primary_text_color_dark="#FFFFFF",
+        block_background_fill="#FFFFFF",
+        block_background_fill_dark="#FFFFFF",
         block_title_text_color="#01689B",
+        block_title_text_color_dark="#01689B",
         block_label_text_color="#333333",
+        block_label_text_color_dark="#333333",
+        body_text_color="#333333",
+        body_text_color_dark="#333333",
+        body_text_color_subdued="#666666",
+        body_text_color_subdued_dark="#666666",
         panel_background_fill="#FFFFFF",
-        panel_border_color="#C7E9F1"
+        panel_background_fill_dark="#FFFFFF",
+        panel_border_color="#E0E0E0",
+        panel_border_color_dark="#E0E0E0",
+        input_background_fill="#FFFFFF",
+        input_background_fill_dark="#FFFFFF",
+        input_background_fill_focus="#FFFFFF",
+        input_background_fill_focus_dark="#FFFFFF",
+        input_background_fill_hover="#FFFFFF",
+        input_background_fill_hover_dark="#FFFFFF",
+        input_border_color="#E0E0E0",
+        input_border_color_dark="#E0E0E0",
+        input_border_color_focus="#01689B",
+        input_border_color_focus_dark="#01689B",
+        input_border_color_hover="#01689B",
+        input_border_color_hover_dark="#01689B",
+        input_placeholder_color="#999999",
+        input_placeholder_color_dark="#999999",
+        checkbox_background_color="#FFFFFF",
+        checkbox_background_color_dark="#FFFFFF",
+        checkbox_background_color_focus="#FFFFFF",
+        checkbox_background_color_focus_dark="#FFFFFF",
+        checkbox_background_color_hover="#FFFFFF",
+        checkbox_background_color_hover_dark="#FFFFFF",
+        checkbox_background_color_selected="#01689B",
+        checkbox_background_color_selected_dark="#01689B",
+        checkbox_border_color="#01689B",
+        checkbox_border_color_dark="#01689B",
+        checkbox_border_color_focus="#01689B",
+        checkbox_border_color_focus_dark="#01689B",
+        checkbox_border_color_hover="#01547D",
+        checkbox_border_color_hover_dark="#01547D",
+        checkbox_border_color_selected="#01689B",
+        checkbox_border_color_selected_dark="#01689B",
+        checkbox_label_background_fill="#FFFFFF",
+        checkbox_label_background_fill_dark="#FFFFFF",
+        checkbox_label_background_fill_hover="#F7F9FB",
+        checkbox_label_background_fill_hover_dark="#F7F9FB",
+        checkbox_label_background_fill_selected="#E8F4F8",
+        checkbox_label_background_fill_selected_dark="#E8F4F8",
+        checkbox_label_text_color="#333333",
+        checkbox_label_text_color_dark="#333333",
+        checkbox_label_text_color_selected="#01689B",
+        checkbox_label_text_color_selected_dark="#01689B"
     )
 
     with gr.Blocks(
         title="Leesplank Noot - UWV Innovatie Hub",
         theme=uwv_theme,
         css="""
-        .gradio-container {
-            font-family: 'Open Sans', Arial, sans-serif !important;
-            background: linear-gradient(180deg, #E8F4F8 0%, #FFFFFF 100%);
-        }
+        /* Minimal UWV styling - let Gradio handle most things */
         h1 {
-            color: #01689B !important;
+            color: #01689B;
             border-top: 4px solid #01689B;
             padding-top: 1.5rem;
-            margin-top: 0;
-        }
-        h2 {
-            color: #01547D !important;
         }
+
         .author-block {
             background: linear-gradient(135deg, #FCE1BF 0%, #FFE9CC 100%);
             padding: 1.5rem;
             border-left: 4px solid #01689B;
             margin: 1.5rem 0;
             border-radius: 0 8px 8px 0;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
-        .model-output-card {
-            background: white;
-            border-radius: 8px;
+
+        /* Simple styling for example text cards */
+        .example-text-card {
+            background: linear-gradient(135deg, #FCE1BF 0%, #FFE9CC 100%);
+            border: 2px solid #E8F4F8;
+            color: #333;
             padding: 1.5rem;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            border-top: 3px solid #01689B;
-            min-height: 200px;
-        }
-        .model-title {
-            color: #01689B;
-            font-weight: bold;
-            font-size: 1.1em;
-            margin-bottom: 1rem;
-            padding-bottom: 0.5rem;
-            border-bottom: 1px solid #E8F4F8;
-        }
-        .checkbox-group {
-            background: #FCE1BF;
-            padding: 1rem;
+            min-height: 140px;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            cursor: pointer;
             border-radius: 8px;
-            margin: 1rem 0;
         }
-        .footer-section {
-            border-top: 4px solid #01689B;
-            background: linear-gradient(180deg, #FFFFFF 0%, #E8F4F8 100%);
-            margin-top: 3rem;
-            padding-top: 2rem;
-        }
-        .examples-section {
-            background: #FFF4E6;
-            padding: 1rem;
-            border-radius: 8px;
-            margin: 1rem 0;
+        .example-text-card:hover {
+            border-color: #01689B;
+            transform: translateY(-2px);
         }
         """
     ) as demo:
         gr.Markdown("""
         # 📝 Leesplank Noot
-        ## Nederlandse Tekstvereenvoudiging / Dutch Text Simplification
-
-        <div class="author-block">
-        <strong>Ontwikkeld door / Developed by:</strong> UWV Innovatie Hub<br>
-        <strong>Contact:</strong> <a href="mailto:innovatie@uwv.nl">innovatie@uwv.nl</a><br>
-        <strong>Mede mogelijk gemaakt door / Partly funded by:</strong> IDO 2024 (Innovatie en Digitalisering Ontwikkelingen)
-        </div>
-
-        Vergelijk tekstvereenvoudiging van drie AI-modellen tegelijk.
-        *Compare text simplification from three AI models simultaneously.*
+        ## Nederlandse Tekstvereenvoudiging
         """)
 
         with gr.Row():
@@ -317,28 +318,73 @@ def create_interface():
                 model_checkboxes = gr.CheckboxGroup(
                     choices=[name for name, _ in MODEL_ORDER],
                     value=[name for name, _ in MODEL_ORDER],  # All selected by default
-                    label="Selecteer modellen / Select models",
-                    info="Kies welke modellen gebruikt worden / Choose which models to use"
+                    label="Selecteer modellen",
+                    info="Kies welke modellen je wilt vergelijken"
                 )
 
+            with gr.Column(scale=1):
+                gr.HTML("""
+                <div class="author-block">
+                <strong>Ontwikkeld door:</strong> UWV Innovatie Hub<br>
+                <strong>Contact:</strong> <a href="mailto:innovatie@uwv.nl">innovatie@uwv.nl</a><br>
+                <strong>Mede mogelijk gemaakt door:</strong> IDO 2024 (Innovatie en Digitalisering Ontwikkelingen)
+                </div>
+                """)
+
+        gr.Markdown("""
+        Vergelijk tekstvereenvoudiging van drie AI-modellen naast elkaar.
+        """)
+
         with gr.Row():
             with gr.Column(scale=1):
                 input_text = gr.Textbox(
-                    label="Originele tekst / Original text",
-                    placeholder="Voer hier de te vereenvoudigen tekst in...\nEnter text to simplify here...",
-                    lines=8
+                    label="Voer je tekst in",
+                    placeholder="Typ of plak hier de tekst die je wilt vereenvoudigen...",
+                    lines=12,
+                    max_lines=20
                 )
 
                 simplify_btn = gr.Button(
-                    "🔄 Vereenvoudig met alle geselecteerde modellen / Simplify with all selected models",
+                    "🔄 Vereenvoudig tekst",
                     variant="primary",
-                    scale=1
+                    size="lg"
                 )
 
+            with gr.Column(scale=2):
+                gr.Markdown("### 📚 Voorbeeldteksten")
+
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        btn1 = gr.Button(
+                            f"🔬 FYSICA\n\n{EXAMPLES[0][:120]}...",
+                            elem_classes="example-text-card",
+                            size="lg"
+                        )
+                    with gr.Column(scale=1):
+                        btn2 = gr.Button(
+                            f"⚛️ NATUURKUNDE\n\n{EXAMPLES[1][:120]}...",
+                            elem_classes="example-text-card",
+                            size="lg"
+                        )
+
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        btn3 = gr.Button(
+                            f"🧬 BIOLOGIE\n\n{EXAMPLES[2][:120]}...",
+                            elem_classes="example-text-card",
+                            size="lg"
+                        )
+                    with gr.Column(scale=1):
+                        btn4 = gr.Button(
+                            f"💻 INFORMATICA\n\n{EXAMPLES[3][:120]}...",
+                            elem_classes="example-text-card",
+                            size="lg"
+                        )
+
         # Three-column layout for results
         with gr.Row(equal_height=True):
             with gr.Column(scale=1, visible=True) as col_eurollm:
-                gr.Markdown('<div class="model-title">🚀 EuroLLM-1.7b (Snelste / Fastest)</div>')
+                gr.Markdown('<div class="model-title">🚀 Leesplank Noot EuroLLM-1.7b</div>')
                 output_eurollm = gr.Textbox(
                     label="",
                     lines=10,
@@ -347,7 +393,7 @@ def create_interface():
                 metrics_eurollm = gr.Markdown("")
 
             with gr.Column(scale=1, visible=True) as col_granite:
-                gr.Markdown('<div class="model-title">💎 Granite-3.3-2b (Beste kwaliteit / Best quality)</div>')
+                gr.Markdown('<div class="model-title">💎 Leesplank Noot Granite-3.3-2b</div>')
                 output_granite = gr.Textbox(
                     label="",
                     lines=10,
@@ -356,7 +402,7 @@ def create_interface():
                 metrics_granite = gr.Markdown("")
 
             with gr.Column(scale=1, visible=True) as col_llama:
-                gr.Markdown('<div class="model-title">🦙 Llama-3.2-3b (Gebalanceerd / Balanced)</div>')
+                gr.Markdown('<div class="model-title">🦙 Leesplank Noot Llama-3.2-3b</div>')
                 output_llama = gr.Textbox(
                     label="",
                     lines=10,
@@ -364,33 +410,26 @@ def create_interface():
                 )
                 metrics_llama = gr.Markdown("")
 
-        with gr.Row():
-            gr.Examples(
-                examples=EXAMPLES,
-                inputs=input_text,
-                label="Voorbeelden / Examples"
-            )
-
-        with gr.Accordion("ℹ️ Over deze demo / About this demo", open=False):
+        with gr.Accordion("ℹ️ Over deze demo", open=False):
             gr.Markdown("""
-            ## Project Informatie / Project Information
+            ## Projectinformatie
 
             Deze demo toont drie Nederlandse tekstvereenvoudigingsmodellen ontwikkeld door **UWV Innovatie Hub** als onderdeel van het Leesplank Noot project.
 
-            ### Modellen / Models:
-            - **EuroLLM-1.7b**: Snelste model (27.5 tokens/s)
-            - **Granite-3.3-2b**: Hoogste kwaliteit (SARI 67.80)
-            - **Llama-3.2-3b**: Gebalanceerde prestaties
+            ### Modellen:
+            - **Leesplank Noot EuroLLM-1.7b**: 1.7B parameters, SARI score: 66.44
+            - **Leesplank Noot Granite-3.3-2b**: 2B parameters, SARI score: 67.80
+            - **Leesplank Noot Llama-3.2-3b**: 3B parameters, SARI score: 67.50
 
             Alle modellen zijn getraind op 1.89M Nederlandse Wikipedia-vereenvoudigingen en produceren tekst op B1-niveau voor betere toegankelijkheid van overheidscommunicatie.
 
-            ### Ontwikkeling / Development:
+            ### Ontwikkeling:
             - **Ontwikkeld door:** UWV Innovatie Hub
             - **Projectleiding:** innovatie@uwv.nl
             - **Financiering:** Dit project is mede mogelijk gemaakt door **IDO 2024** (Innovatie en Digitalisering Ontwikkelingen)
             - **Licentie:** Apache 2.0
 
-            ### Doel / Purpose:
+            ### Doel:
             Het verbeteren van de toegankelijkheid van overheidsteksten voor burgers met leesmoeilijkheden, in lijn met de Wet digitale overheid en EU toegankelijkheidsrichtlijnen.
             """)
 
@@ -415,6 +454,12 @@ def create_interface():
             ]
         )
 
+        # Example button handlers
+        btn1.click(fn=lambda: EXAMPLES[0], outputs=input_text)
+        btn2.click(fn=lambda: EXAMPLES[1], outputs=input_text)
+        btn3.click(fn=lambda: EXAMPLES[2], outputs=input_text)
+        btn4.click(fn=lambda: EXAMPLES[3], outputs=input_text)
+
         # Footer
         gr.Markdown("""
         <div class="footer-section">