Upload app.py with huggingface_hub

app.py

@@ -135,33 +135,96 @@ examples = [
     ["How often do you use a smartphone or tablet?"],
 ]
 
-# Custom CSS for Sikt branding
+# Custom CSS for Sikt branding using design tokens
 custom_css = """
+:root {
+    /* Sikt Design Tokens */
+    --sds-color-text-primary: #1a1a1a;
+    --sds-color-text-secondary: #331c6c;
+    --sds-color-interaction-primary: #7d5da6;
+    --sds-color-interaction-primary-hover: #6b4d94;
+    --sds-color-layout-background-default: #ffffff;
+    --sds-color-layout-background-subtle: #f3f1fe;
+    --sds-color-accent-primary: #ee3243;
+    --sds-space-gap-small: 0.5rem;
+    --sds-space-gap-medium: 1rem;
+    --sds-space-gap-large: 1.5rem;
+    --sds-space-padding-small: 0.75rem;
+    --sds-space-padding-medium: 1rem;
+    --sds-space-padding-large: 1.5rem;
+    --sds-space-border-radius-small: 4px;
+    --sds-space-border-radius-medium: 8px;
+    --sds-space-border-radius-large: 12px;
+}
+
 .gradio-container {
-    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
 }
-h1 {
-    color: #331c6c !important;
+
+h1, .gr-title {
+    color: var(--sds-color-text-secondary) !important;
+    font-weight: 600 !important;
+}
+
+.gr-box {
+    border-radius: var(--sds-space-border-radius-medium) !important;
 }
-.header-logo {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1rem;
+
+.gr-button {
+    background-color: var(--sds-color-interaction-primary) !important;
+    border-color: var(--sds-color-interaction-primary) !important;
+    border-radius: var(--sds-space-border-radius-small) !important;
+    font-weight: 500 !important;
+    transition: all 0.2s ease !important;
 }
-button.primary {
-    background-color: #ee3243 !important;
-    border-color: #ee3243 !important;
+
+.gr-button:hover {
+    background-color: var(--sds-color-interaction-primary-hover) !important;
+    border-color: var(--sds-color-interaction-primary-hover) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 2px 8px rgba(125, 93, 166, 0.3) !important;
 }
-button.primary:hover {
-    background-color: #d62839 !important;
-    border-color: #d62839 !important;
+
+.gr-button-primary {
+    background: linear-gradient(135deg, var(--sds-color-interaction-primary) 0%, #6b4d94 100%) !important;
 }
-.tabs {
-    border-color: #331c6c !important;
+
+.gr-input, .gr-textbox {
+    border-color: #e0e0e0 !important;
+    border-radius: var(--sds-space-border-radius-small) !important;
 }
+
+.gr-input:focus, .gr-textbox:focus {
+    border-color: var(--sds-color-interaction-primary) !important;
+    box-shadow: 0 0 0 2px rgba(125, 93, 166, 0.1) !important;
+}
+
+.gr-panel {
+    background-color: var(--sds-color-layout-background-subtle) !important;
+    border-radius: var(--sds-space-border-radius-medium) !important;
+    padding: var(--sds-space-padding-large) !important;
+}
+
+.gr-form {
+    gap: var(--sds-space-gap-medium) !important;
+}
+
 footer {
-    background-color: #f3f1fe !important;
+    background-color: var(--sds-color-layout-background-subtle) !important;
+    border-top: 1px solid #e0e0e0 !important;
+}
+
+.sikt-logo {
+    max-width: 120px;
+    height: auto;
+}
+
+.sikt-header {
+    background: linear-gradient(135deg, #f3f1fe 0%, #ffffff 100%);
+    padding: var(--sds-space-padding-medium);
+    border-radius: var(--sds-space-border-radius-medium);
+    margin-bottom: var(--sds-space-gap-large);
+    border-left: 4px solid var(--sds-color-interaction-primary);
 }
 """
 
@@ -174,55 +237,78 @@ demo = gr.Interface(
         label="Survey Question"
     ),
     outputs=gr.Markdown(label="Classification Result"),
-    title="🔍 ESS Variable Classification",
+    title="ESS Variable Classification",
     description="""
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
-        <img src="https://cdn.brandfetch.io/id9VCyV64w/theme/dark/logo.svg?c=1bxid64Mup7aczewSAYMX"
-             alt="Sikt Logo" style="height: 40px;">
-        <div>
-            <p style="margin: 0; color: #331c6c; font-size: 1.1em; font-weight: 500;">
-                Developed by <strong>Sikt</strong> – Norwegian Agency for Shared Services in Education and Research
-            </p>
+    <div class="sikt-header">
+        <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
+            <img src="file/Sikt-Primærlogo-Mørk_0.png" alt="Sikt Logo" class="sikt-logo">
+            <div style="flex: 1; min-width: 300px;">
+                <h3 style="margin: 0 0 0.5rem 0; color: var(--sds-color-text-secondary); font-size: 1.25rem; font-weight: 600;">
+                    ESS Variable Classifier
+                </h3>
+                <p style="margin: 0; color: var(--sds-color-text-primary); font-size: 0.95rem; line-height: 1.5;">
+                    Developed by <strong>Sikt</strong> – Norwegian Agency for Shared Services in Education and Research
+                </p>
+            </div>
         </div>
     </div>
 
-    Automatically classify European Social Survey (ESS) questions into **19 subject categories**.
-
-    This AI model is fine-tuned from XLM-RoBERTa-Base and achieves **83.8% accuracy** on the test set.
+    <div style="margin: 1.5rem 0;">
+        <p style="font-size: 1.05rem; color: var(--sds-color-text-primary); line-height: 1.6;">
+            Automatically classify European Social Survey (ESS) questions into <strong>19 subject categories</strong>.
+            This AI model is fine-tuned from XLM-RoBERTa-Base and achieves <strong>83.8% accuracy</strong>.
+        </p>
+    </div>
     """,
     examples=examples,
     article="""
-    ---
-
-    ### About This Tool
-
-    This classifier helps researchers and data managers organize survey variables by automatically
-    categorizing them into subject areas. The model was trained on European Social Survey metadata
-    and can classify questions into categories including:
-
-    - **Education** • **Politics** • **Health** • **Labour & Employment**
-    - **Society & Culture** • **Economics** • **Psychology** • **Demographics**
-    - And 11 more categories
-
-    ### Technical Details
-
-    - **Base Model:** [XLM-RoBERTa-Base](https://huggingface.co/FacebookAI/xlm-roberta-base) (125M parameters)
-    - **Fine-tuned Model:** [benjaminBeuster/xlm-roberta-base-ess-classification](https://huggingface.co/benjaminBeuster/xlm-roberta-base-ess-classification)
-    - **Performance:** 83.8% accuracy | F1: 0.796 (weighted) | 105 test samples
-    - **Training Data:** [ESS Classification Dataset](https://huggingface.co/datasets/benjaminBeuster/ess_classification)
-
-    ### About Sikt
-
-    [Sikt](https://sikt.no) – Norwegian Agency for Shared Services in Education and Research
-    provides digital infrastructure and services for research and education in Norway.
+    <div style="margin-top: 2rem; padding-top: 2rem; border-top: 2px solid var(--sds-color-layout-background-subtle);">
+
+    <div style="background: linear-gradient(135deg, #f3f1fe 0%, #ffffff 100%); padding: 1.5rem; border-radius: var(--sds-space-border-radius-medium); margin-bottom: 2rem; border-left: 4px solid var(--sds-color-interaction-primary);">
+        <h3 style="color: var(--sds-color-text-secondary); margin-top: 0; font-weight: 600;">📊 About This Tool</h3>
+        <p style="color: var(--sds-color-text-primary); line-height: 1.6;">
+            This classifier helps researchers and data managers organize survey variables by automatically
+            categorizing them into subject areas. The model was trained on European Social Survey metadata
+            and can classify questions into <strong>19 categories</strong>:
+        </p>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; margin-top: 1rem;">
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">📚 Education</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">🏛️ Politics</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">🏥 Health</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">💼 Labour & Employment</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">🌍 Society & Culture</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">💰 Economics</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">🧠 Psychology</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">👥 Demographics</span>
+        </div>
+        <p style="color: #666; margin-top: 1rem; font-size: 0.9rem;"><em>...and 11 more specialized categories</em></p>
+    </div>
 
-    ---
+    <div style="background: white; padding: 1.5rem; border-radius: var(--sds-space-border-radius-medium); margin-bottom: 2rem; border: 1px solid #e0e0e0;">
+        <h3 style="color: var(--sds-color-text-secondary); margin-top: 0; font-weight: 600;">🔬 Technical Details</h3>
+        <ul style="color: var(--sds-color-text-primary); line-height: 1.8; padding-left: 1.5rem;">
+            <li><strong>Base Model:</strong> <a href="https://huggingface.co/FacebookAI/xlm-roberta-base" style="color: var(--sds-color-interaction-primary);">XLM-RoBERTa-Base</a> (125M parameters)</li>
+            <li><strong>Fine-tuned Model:</strong> <a href="https://huggingface.co/benjaminBeuster/xlm-roberta-base-ess-classification" style="color: var(--sds-color-interaction-primary);">benjaminBeuster/xlm-roberta-base-ess-classification</a></li>
+            <li><strong>Performance:</strong> 83.8% accuracy | F1: 0.796 (weighted) | 105 test samples</li>
+            <li><strong>Training Data:</strong> <a href="https://huggingface.co/datasets/benjaminBeuster/ess_classification" style="color: var(--sds-color-interaction-primary);">ESS Classification Dataset</a></li>
+        </ul>
+    </div>
 
-    <div style="text-align: center; padding: 1rem; background-color: #f3f1fe; border-radius: 8px; margin-top: 1rem;">
-        <p style="color: #331c6c; margin: 0;">
-            Questions or feedback? Visit <a href="https://sikt.no" style="color: #ee3243; text-decoration: none; font-weight: 600;">sikt.no</a>
+    <div style="background: linear-gradient(135deg, var(--sds-color-layout-background-subtle) 0%, white 100%); padding: 1.5rem; border-radius: var(--sds-space-border-radius-medium); text-align: center;">
+        <h3 style="color: var(--sds-color-text-secondary); margin-top: 0; font-weight: 600;">About Sikt</h3>
+        <p style="color: var(--sds-color-text-primary); line-height: 1.6; max-width: 600px; margin: 0 auto 1rem auto;">
+            <a href="https://sikt.no" style="color: var(--sds-color-interaction-primary); text-decoration: none; font-weight: 600;">Sikt</a>
+            – Norwegian Agency for Shared Services in Education and Research provides digital infrastructure
+            and services for research and education in Norway.
+        </p>
+        <p style="margin-top: 1.5rem;">
+            <a href="https://sikt.no" style="display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--sds-color-interaction-primary); color: white; text-decoration: none; border-radius: var(--sds-space-border-radius-small); font-weight: 600; transition: all 0.2s;">
+                Visit sikt.no →
+            </a>
         </p>
     </div>
+
+    </div>
     """,
     theme=gr.themes.Soft(
         primary_hue="red",