app.py

"""
HuggingFace Space - ESS Variable Classification Demo
Interactive Gradio interface for the XLM-RoBERTa ESS classifier.
Developed by Sikt - Norwegian Agency for Shared Services in Education and Research
"""
import gradio as gr
from transformers import pipeline

# Load the model
MODEL_NAME = "benjaminBeuster/xlm-roberta-base-ess-classification"
classifier = pipeline("text-classification", model=MODEL_NAME)

# Sikt brand colors
SIKT_COLORS = {
    "amaranth": "#ee3243",      # Primary accent
    "meteorite": "#331c6c",      # Dark
    "selago": "#f3f1fe"          # Light
}

# Category descriptions
CATEGORY_INFO = {
    "DEMOGRAPHY (POPULATION, VITAL STATISTICS, AND CENSUSES)": "Demographics, population statistics, age, gender",
    "ECONOMICS": "Economic issues, finance, income, wealth",
    "EDUCATION": "Education, schooling, qualifications",
    "HEALTH": "Healthcare, medical services, health satisfaction",
    "POLITICS": "Political systems, trust in government, parliament",
    "SOCIETY AND CULTURE": "Social issues, cultural topics, religion",
    "LABOUR AND EMPLOYMENT": "Work, occupation, employment status",
    "PSYCHOLOGY": "Mental health, psychological wellbeing",
    "HOUSING AND LAND USE": "Housing conditions, residential environment",
    "NATURAL ENVIRONMENT": "Environmental concerns, climate change",
    "LAW, CRIME AND LEGAL SYSTEMS": "Justice, crime, legal matters",
    "MEDIA, COMMUNICATION AND LANGUAGE": "Media use, communication patterns",
    "SOCIAL STRATIFICATION AND GROUPINGS": "Social class, inequality, social groups",
    "SOCIAL WELFARE POLICY AND SYSTEMS": "Social benefits, welfare services",
    "TRANSPORT AND TRAVEL": "Transportation, mobility, travel patterns",
    "TRADE, INDUSTRY AND MARKETS": "Business, commerce, markets",
    "SCIENCE AND TECHNOLOGY": "Scientific advancement, technology use",
    "HISTORY": "Historical events, memory, heritage",
    "OTHER": "General or uncategorized topics"
}

def classify_text(text):
    """Classify survey question/variable."""
    if not text.strip():
        return "Please enter some text to classify."

    result = classifier(text)[0]
    label = result['label']
    score = result['score']

    # Format output
    output = f"**Category:** {label}\n\n"
    output += f"**Confidence:** {score:.2%}\n\n"

    if label in CATEGORY_INFO:
        output += f"**Description:** {CATEGORY_INFO[label]}"

    return output

# Example questions - mix of actual ESS data and generated diverse questions
# Using exact category names from pydantic_classes.py
import random

all_examples = [
    # EDUCATION
    ["What is the highest level of education you have successfully completed?"],
    ["What is the highest level of education your mother successfully completed?"],
    ["How many years of full-time education have you completed?"],

    # POLITICS
    ["Which party did you vote for in the last national election?"],
    ["Trust in country's parliament"],
    ["How satisfied are you with the way democracy works in your country?"],
    ["How much do you trust the legal system?"],

    # HEALTH
    ["How satisfied are you with the healthcare system?"],
    ["Which health problems that you had in the last 12 months hampered you in your daily activities?"],
    ["How is your health in general - very good, good, fair, bad, or very bad?"],

    # LABOUR AND EMPLOYMENT
    ["What best describes what you have been doing for the last 7 days - in paid work?"],
    ["Which description best describes the sort of work your mother did when you were 14?"],
    ["How many hours do you normally work per week in your main job?"],
    ["Are you a member of a trade union or similar organization?"],

    # SOCIETY AND CULTURE
    ["How often do you pray apart from at religious services?"],
    ["How important is it to always behave properly and avoid doing anything people would say is wrong?"],
    ["Do you consider yourself as belonging to any particular religion or denomination?"],

    # DEMOGRAPHY (POPULATION, VITAL STATISTICS, AND CENSUSES)
    ["What is your age?"],
    ["What is your gender?"],
    ["What is your current legal marital status?"],
    ["In which country were you born?"],

    # ECONOMICS
    ["Which of the descriptions on this card comes closest to how you feel about your household's income nowadays?"],
    ["What is your household's total net income from all sources?"],

    # PSYCHOLOGY
    ["Taking all things together, how happy would you say you are?"],
    ["Have you felt depressed or sad in the last two weeks?"],
    ["How often do you feel stressed?"],

    # NATURAL ENVIRONMENT
    ["How worried are you about climate change?"],
    ["To what extent do you think climate change is caused by human activity?"],

    # LAW, CRIME AND LEGAL SYSTEMS
    ["How safe do you feel walking alone at night in your local area?"],
    ["Have you or a member of your household been a victim of burglary or assault in the last 5 years?"],

    # MEDIA, COMMUNICATION AND LANGUAGE
    ["How much time do you spend watching television on an average weekday?"],
    ["How often do you use the internet for news?"],

    # SOCIAL STRATIFICATION AND GROUPINGS
    ["In society there are groups which tend to be towards the top and groups which tend to be towards the bottom. Where would you place yourself?"],
    ["Do you belong to any discriminated group in this country?"],

    # HOUSING AND LAND USE
    ["Do you rent or own your accommodation?"],
    ["How many rooms do you have for your household's use only?"],

    # SOCIAL WELFARE POLICY AND SYSTEMS
    ["Should the government reduce income differences?"],
    ["How satisfied are you with the state of social benefits in your country?"],

    # TRANSPORT AND TRAVEL
    ["How long does your daily commute to work take?"],
    ["What is your main mode of transportation?"],

    # SCIENCE AND TECHNOLOGY
    ["To what extent do you think scientific advances benefit society?"],
    ["How often do you use a smartphone or tablet?"],

    # HISTORY
    ["What do you think about your country's colonial past?"],
    ["How important is it to preserve historical monuments?"],

    # TRADE, INDUSTRY AND MARKETS
    ["Do you work in the private or public sector?"],
    ["How do you feel about free trade agreements?"],

    # OTHER
    ["What are your thoughts on the future?"],
    ["How do you define quality of life?"],
]

# Shuffle and select 30 examples
random.seed(42)  # For reproducibility
examples = random.sample(all_examples, min(30, len(all_examples)))

# 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, "Segoe UI", sans-serif !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;
}

.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;
}

.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;
}

.gr-button-primary {
    background: linear-gradient(135deg, var(--sds-color-interaction-primary) 0%, #6b4d94 100%) !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: 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);
}
"""

# Create Gradio interface with Sikt branding
demo = gr.Interface(
    fn=classify_text,
    inputs=gr.Textbox(
        lines=3,
        placeholder="Enter a survey question or variable description...",
        label="Survey Question"
    ),
    outputs=gr.Markdown(label="Classification Result"),
    title="ESS Variable Classification",
    description="""
    <div class="sikt-header">
        <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
            <img src="https://modansa.blob.core.windows.net/testcontainer/Sikt-Prim%C3%A6rlogo-M%C3%B8rk_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>

    <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="""
    <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(280px, 1fr)); gap: 0.5rem; margin-top: 1rem;">
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">📚 EDUCATION</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🏛️ POLITICS</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🏥 HEALTH</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">💼 LABOUR AND EMPLOYMENT</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🌍 SOCIETY AND CULTURE</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">💰 ECONOMICS</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🧠 PSYCHOLOGY</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">👥 DEMOGRAPHY (POPULATION, VITAL STATISTICS, AND CENSUSES)</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🏠 HOUSING AND LAND USE</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🌱 NATURAL ENVIRONMENT</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">⚖️ LAW, CRIME AND LEGAL SYSTEMS</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">📺 MEDIA, COMMUNICATION AND LANGUAGE</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">👔 SOCIAL STRATIFICATION AND GROUPINGS</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🤝 SOCIAL WELFARE POLICY AND SYSTEMS</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🚗 TRANSPORT AND TRAVEL</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🏪 TRADE, INDUSTRY AND MARKETS</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">🔬 SCIENCE AND TECHNOLOGY</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">📜 HISTORY</span>
            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.8rem; border-left: 3px solid #7d5da6;">📋 OTHER</span>
        </div>
    </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="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",
        secondary_hue="purple",
    ),
    css=custom_css
)

if __name__ == "__main__":
    demo.launch()