Upload app.py

app.py

@@ -1,8 +1,9 @@
 import os
 import re
 import json
-import gradio as gr
 from typing import Dict, Any, List, Optional
+
+import gradio as gr
 from huggingface_hub import InferenceClient
 
 # ────────────────────────────────────────────────────────────────────────────────
@@ -26,15 +27,15 @@ GUIDES = {
         "mouvement": "Mise sur le NEAT (mouvements du quotidien): marche, escaliers, étirements courts, pauses actives, mini-rituels autour du café ou des appels.",
         "cerveau": "Stimulation douce: curiosité, mémoire, respiration, mini-jeux, apprentissage de 2-3 minutes. Zéro jargon médical.",
         "liens": "Interactions humaines simples: gratitude, messages courts, appel bref, se joindre à quelqu’un, sourire, entraide. Inclusif, bienveillant.",
-        "bien-etre": "Auto-soin micro: pauses, respiration, sommeil régulier, journal rapide, limiter les écrans un moment. Ton chaleureux, zéro culpabilisation."
+        "bien-etre": "Auto-soin micro: pauses, respiration, sommeil régulier, journal rapide, limiter les écrans un moment. Ton chaleureux, zéro culpabilisation.",
     },
     "en": {
         "alimentation": "Focus on simple habits: hydration, fruit/veg, meal rhythm, portions, smart snacks. No strict diets, no moralizing.",
         "mouvement": "Lean into NEAT: daily walking, stairs, quick stretches, active breaks, tiny rituals around coffee or calls.",
         "cerveau": "Gentle stimulation: curiosity, memory, breathing, tiny games, 2–3 min learning. No medical jargon.",
         "liens": "Simple human interactions: gratitude, short messages, brief call, joining someone, smiling, helping. Inclusive, kind tone.",
-        "bien-etre": "Micro self-care: breaks, breathing, steady sleep, quick journaling, small screen limits. Warm tone, no guilt."
-    }
+        "bien-etre": "Micro self-care: breaks, breathing, steady sleep, quick journaling, small screen limits. Warm tone, no guilt.",
+    },
 }
 
 # Few-shot examples to anchor style (one per category per language)
@@ -44,136 +45,141 @@ FEWSHOTS = {
             "questions": [
                 "Quelle boisson te donne envie de boire plus d’eau dans la journée ?",
                 "Quel ajout simple rend ton petit-déj plus rassasiant ?",
-                "Quand as-tu naturellement faim d’un fruit ou d’un yaourt ?"
+                "Quand as-tu naturellement faim d’un fruit ou d’un yaourt ?",
             ],
             "micro_actions": [
                 "Remplir une gourde ce matin.",
-                "Ajouter un fruit à la collation de l’après-midi."
-            ]
+                "Ajouter un fruit à la collation de l’après-midi.",
+            ],
         },
         "mouvement": {
             "questions": [
                 "Quel trajet pourrais-tu faire à pied au moins une fois cette semaine ?",
                 "Quelle pause-active de 2 minutes peux-tu glisser entre deux tâches ?",
-                "Qu’est-ce qui te fait bouger sans y penser (ex: marcher au téléphone) ?"
+                "Qu’est-ce qui te fait bouger sans y penser (ex: marcher au téléphone) ?",
             ],
             "micro_actions": [
                 "Monter un étage par les escaliers aujourd’hui.",
-                "Faire 5 étirements doux après le café."
-            ]
+                "Faire 5 étirements doux après le café.",
+            ],
         },
         "cerveau": {
             "questions": [
                 "Qu’est-ce qui a suscité ta curiosité aujourd’hui ?",
                 "Quel moment t’irait pour 3 minutes de respiration ?",
-                "Quel mini-jeu aimes-tu pour réveiller l’esprit (ex: 3 mots fléchés) ?"
+                "Quel mini-jeu aimes-tu pour réveiller l’esprit (ex: 3 mots fléchés) ?",
             ],
             "micro_actions": [
                 "Programmer un minuteur de 3 minutes pour respirer.",
-                "Lire un paragraphe d’un sujet nouveau ce soir."
-            ]
+                "Lire un paragraphe d’un sujet nouveau ce soir.",
+            ],
         },
         "liens": {
             "questions": [
                 "Qui pourrais-tu remercier aujourd’hui et comment ?",
                 "À qui enverrais-tu un message court pour reprendre contact ?",
-                "Avec qui partagerais-tu une courte marche cette semaine ?"
+                "Avec qui partagerais-tu une courte marche cette semaine ?",
             ],
             "micro_actions": [
                 "Envoyer un message de gratitude à une personne.",
-                "Proposer une pause-café de 10 minutes."
-            ]
+                "Proposer une pause-café de 10 minutes.",
+            ],
         },
         "bien-etre": {
             "questions": [
                 "Quel signal t’indique qu’il est temps de faire une pause ?",
                 "Quelle routine de 2 minutes t’aide à te recentrer ?",
-                "Quel moment favorise un coucher plus régulier ?"
+                "Quel moment favorise un coucher plus régulier ?",
             ],
             "micro_actions": [
                 "Éteindre les écrans 10 minutes plus tôt ce soir.",
-                "Écrire 3 lignes sur ton humeur du jour."
-            ]
-        }
+                "Écrire 3 lignes sur ton humeur du jour.",
+            ],
+        },
     },
     "en": {
         "alimentation": {
             "questions": [
                 "What drink makes you want to sip more water through the day?",
                 "What small add-on makes your breakfast more filling?",
-                "When do you naturally crave a fruit or yogurt?"
+                "When do you naturally crave a fruit or yogurt?",
             ],
             "micro_actions": [
                 "Fill a water bottle this morning.",
-                "Add one fruit to your afternoon snack."
-            ]
+                "Add one fruit to your afternoon snack.",
+            ],
         },
         "mouvement": {
             "questions": [
                 "Which short trip could you walk at least once this week?",
                 "Which 2-minute active break fits between two tasks?",
-                "What makes you move without noticing (e.g., walking on calls)?"
+                "What makes you move without noticing (e.g., walking on calls)?",
             ],
             "micro_actions": [
                 "Take one flight of stairs today.",
-                "Do 5 light stretches after coffee."
-            ]
+                "Do 5 light stretches after coffee.",
+            ],
         },
         "cerveau": {
             "questions": [
                 "What sparked your curiosity today?",
                 "When could you do 3 minutes of breathing?",
-                "Which mini-game wakes you up (e.g., 3 crossword clues)?"
+                "Which mini-game wakes you up (e.g., 3 crossword clues)?",
             ],
             "micro_actions": [
                 "Set a 3-minute timer to breathe.",
-                "Read one paragraph on a new topic tonight."
-            ]
+                "Read one paragraph on a new topic tonight.",
+            ],
         },
         "liens": {
             "questions": [
                 "Who could you thank today—and how?",
                 "Who might you text briefly to reconnect?",
-                "Who could you invite for a short walk this week?"
+                "Who could you invite for a short walk this week?",
             ],
             "micro_actions": [
                 "Send a gratitude message to one person.",
-                "Offer a 10-minute coffee break."
-            ]
+                "Offer a 10-minute coffee break.",
+            ],
         },
         "bien-etre": {
             "questions": [
                 "What cue tells you it’s time for a pause?",
                 "What 2-minute routine helps you reset?",
-                "What time supports a steadier bedtime?"
+                "What time supports a steadier bedtime?",
             ],
             "micro_actions": [
                 "Turn screens off 10 minutes earlier tonight.",
-                "Write three lines about your mood today."
-            ]
-        }
-    }
+                "Write three lines about your mood today.",
+            ],
+        },
+    },
 }
 
+# ────────────────────────────────────────────────────────────────────────────────
+# PROMPT & MODEL HELPERS
+
+
 def build_prompt(lang: str, category_key: str, variant: str) -> str:
     cat = next((c for c in CATEGORIES if c["key"] == category_key), None)
     if not cat:
         category_key = "alimentation"
         cat = next((c for c in CATEGORIES if c["key"] == category_key), None)
 
-    # Variant tone
+    guide = GUIDES[lang][category_key]
+    few = FEWSHOTS[lang][category_key]
+
     variant_fr = (
-        "Contrainte de ton: *ludique et original* (‘meilleur’)."
-        if variant == "best" else
-        "Contrainte de ton: *introspectif et authentique* (‘plus sincère’)."
+        "Contrainte de ton: ludique et original (‘meilleur’)."
+        if variant == "best"
+        else "Contrainte de ton: introspectif et authentique (‘plus sincère’)."
     )
     variant_en = (
-        "Tone constraint: *playful and original* (‘best’)."
-        if variant == "best" else
-        "Tone constraint: *introspective and authentic* (‘most sincere’)."
+        "Tone constraint: playful and original (‘best’)."
+        if variant == "best"
+        else "Tone constraint: introspective and authentic (‘most sincere’)."
     )
 
-    # Shared schema
     schema = (
         "{\n"
         '  "category": "<category_key>",\n'
@@ -185,27 +191,6 @@ def build_prompt(lang: str, category_key: str, variant: str) -> str:
         "}"
     )
 
-    # Safety & style guardrails
-    safety_fr = (
-        "Règles de sécurité et de style:\n"
-        "- Zéro conseil médical, pas de diagnostic, pas d’injonction.\n"
-        "- Langage bienveillant, inclusif, non culpabilisant.\n"
-        "- Items concrets, réalisables en 1–3 minutes quand c’est pertinent.\n"
-        "- Phrases courtes. Pas de listes imbriquées. Pas d’emojis dans la sortie.\n"
-        "- Réponds STRICTEMENT en JSON valide, sans texte autour."
-    )
-    safety_en = (
-        "Safety & style rules:\n"
-        "- No medical advice, no diagnosis, no injunctions.\n"
-        "- Kind, inclusive, non-judgmental language.\n"
-        "- Concrete items, doable in 1–3 minutes when relevant.\n"
-        "- Short sentences. No nested lists. No emojis in output.\n"
-        "- Respond in STRICT, valid JSON only, with nothing else."
-    )
-
-    guide = GUIDES[lang][category_key]
-    few = FEWSHOTS[lang][category_key]
-
     if lang == "fr":
         system = (
             "Tu es l’IA du jeu de cartes Neurovie, inspiré du modèle FINGER. "
@@ -217,19 +202,25 @@ def build_prompt(lang: str, category_key: str, variant: str) -> str:
             "- Si l’autre joueur l’a, il la donne et continue. Sinon, tu pioches.\n"
             "Variante: chacun pioche à son tour; le meilleur ou le plus sincère garde la carte."
         )
+        safety = (
+            "Règles de sécurité et de style:\n"
+            "- Zéro conseil médical, pas de diagnostic, pas d’injonction.\n"
+            "- Langage bienveillant, inclusif, non culpabilisant.\n"
+            "- Items concrets, réalisables en 1–3 minutes quand c’est pertinent.\n"
+            "- Phrases courtes. Pas d’emojis. Pas de texte hors JSON.\n"
+        )
         user = (
             f"Catégorie: {cat['fr']} {cat['icon']}. {variant_fr}\n"
             f"Guide de ciblage: {guide}\n"
             "Produit attendu: 3 QUESTIONS et 2 MICRO-ACTIONS, chacune en 1 phrase, concrète.\n"
-            "Adapte le ton selon la contrainte. Respecte scrupuleusement le schéma JSON.\n"
-            "Exemple de style (à imiter, ne pas répéter tel quel):\n"
-            f"- Questions: {few['questions']}\n"
-            f"- Micro-actions: {few['micro_actions']}\n"
+            "Respecte le schéma JSON ci-dessous. Imites le style, pas le contenu exact, des exemples.\n"
+            f"Exemples de style (ne pas copier mot à mot): questions={few['questions']} micro_actions={few['micro_actions']}\n"
             "Schéma JSON strict:\n"
             f"{schema}\n"
             "RENVOIE UNIQUEMENT DU JSON VALIDE."
         )
-        content = f"{system}\n\n{rules}\n\n{safety_fr}\n\n{user}"
+        return f"{system}\n\n{rules}\n\n{safety}\n\n{user}"
+
     else:
         system = (
             "You are the AI for the Neurovie card game, inspired by the FINGER model. "
@@ -241,29 +232,29 @@ def build_prompt(lang: str, category_key: str, variant: str) -> str:
             "- If they have it, they give it and keep asking; otherwise, draw.\n"
             "Variant: players draw in turn; the best or most sincere keeps the card."
         )
+        safety = (
+            "Safety & style rules:\n"
+            "- No medical advice, no diagnosis, no orders.\n"
+            "- Kind, inclusive, non-judgmental language.\n"
+            "- Concrete items, doable in 1–3 minutes when relevant.\n"
+            "- Short sentences. No emojis. No text outside JSON.\n"
+        )
         user = (
             f"Category: {cat['en']} {cat['icon']}. {variant_en}\n"
             f"Targeting guide: {guide}\n"
             "Expected output: 3 QUESTIONS and 2 MICRO-ACTIONS, each one sentence, concrete.\n"
-            "Match the requested tone. Follow the JSON schema exactly.\n"
-            "Style example (imitate tone; do not copy verbatim):\n"
-            f"- Questions: {few['questions']}\n"
-            f"- Micro-actions: {few['micro_actions']}\n"
+            "Follow the JSON schema below. Imitate style, not exact wording, of examples.\n"
+            f"Style examples (do not copy verbatim): questions={few['questions']} micro_actions={few['micro_actions']}\n"
             "Strict JSON schema:\n"
             f"{schema}\n"
-            "RETURN JSON ONLY."
+            "RETURN VALID JSON ONLY."
         )
-        content = f"{system}\n\n{rules}\n\n{safety_en}\n\n{user}"
-
-    return content
+        return f"{system}\n\n{rules}\n\n{safety}\n\n{user}"
 
-# ────────────────────────────────────────────────────────────────────────────────
-# Inference helpers
 
 def try_parse_json(text: str) -> Optional[Dict[str, Any]]:
     if not text:
         return None
-    # Grab last JSON object
     match = re.search(r"\{[\s\S]*\}\s*$", text.strip())
     if not match:
         return None
@@ -272,42 +263,46 @@ def try_parse_json(text: str) -> Optional[Dict[str, Any]]:
     except Exception:
         return None
 
-def normalize_output(data: Dict[str, Any], lang: str, category_key: str, variant: str) -> Dict[str, Any]:
-    """Ensure exactly 3 questions, 2 micro_actions, set tone, fill missing fields."""
-    q = data.get("questions", [])
-    m = data.get("micro_actions", [])
-    # basic sanitization
-    q = [str(s).strip().rstrip() for s in q if str(s).strip()]
-    m = [str(s).strip().rstrip() for s in m if str(s).strip()]
-    # clip/extend
+
+def normalize_output(
+    data: Dict[str, Any], lang: str, category_key: str, variant: str
+) -> Dict[str, Any]:
+    q = [str(x).strip() for x in data.get("questions", []) if str(x).strip()]
+    m = [str(x).strip() for x in data.get("micro_actions", []) if str(x).strip()]
+
     q = (q + [""] * 3)[:3]
     m = (m + [""] * 2)[:2]
 
-    tone = data.get("tone", "")
-    if not tone:
-        tone = ("ludique" if (lang == "fr" and variant == "best")
-                else "sincère" if lang == "fr"
-                else "playful" if variant == "best"
-                else "sincere")
-
-    safety = data.get("safety_notes", "")
-    if not safety:
-        safety = "Reste bienveillant·e, évite les conseils médicaux." if lang == "fr" else "Be kind, avoid medical advice."
+    if not data.get("tone"):
+        if lang == "fr":
+            tone = "ludique" if variant == "best" else "sincère"
+        else:
+            tone = "playful" if variant == "best" else "sincere"
+    else:
+        tone = str(data["tone"])
+
+    safety_notes = data.get("safety_notes")
+    if not safety_notes:
+        safety_notes = (
+            "Reste bienveillant·e, évite les conseils médicaux."
+            if lang == "fr"
+            else "Be kind, avoid medical advice."
+        )
 
-    out = {
+    return {
         "category": category_key,
         "language": lang,
         "questions": q,
         "micro_actions": m,
         "tone": tone,
-        "safety_notes": safety,
+        "safety_notes": safety_notes,
     }
-    return out
+
 
 def model_call(prompt: str) -> str:
     client = InferenceClient(model=MODEL_ID, token=HF_TOKEN)
 
-    # Prefer chat endpoint when available
+    # Try chat-style first
     try:
         resp = client.chat.completions.create(
             model=MODEL_ID,
@@ -316,22 +311,30 @@ def model_call(prompt: str) -> str:
             top_p=0.92,
             max_tokens=220,
         )
-        content = resp.choices[0].message["content"] if hasattr(resp.choices[0], "message") else resp.choices[0].message.content
+        choice = resp.choices[0]
+        content = (
+            choice.message["content"]
+            if isinstance(choice.message, dict)
+            else choice.message.content
+        )
         if isinstance(content, list):
-            content = "".join(part.get("text", "") if isinstance(part, dict) else str(part) for part in content)
+            content = "".join(
+                part.get("text", "") if isinstance(part, dict) else str(part)
+                for part in content
+            )
         return content.strip()
     except Exception:
         pass
 
     # Fallback to text_generation
-    resp = client.text_generation(
+    return client.text_generation(
         prompt,
         max_new_tokens=220,
         temperature=0.85,
         top_p=0.92,
         return_full_text=False,
-    )
-    return resp.strip()
+    ).strip()
+
 
 def generate(lang: str, category_key: str, variant: str) -> Dict[str, str]:
     prompt = build_prompt(lang, category_key, variant)
@@ -344,7 +347,6 @@ def generate(lang: str, category_key: str, variant: str) -> Dict[str, str]:
 
     parsed = try_parse_json(raw_text) if raw_text else None
 
-    # Local fallback if needed (pull from fewshots to keep style tight)
     if not parsed:
         few = FEWSHOTS[lang][category_key]
         parsed = {
@@ -352,58 +354,303 @@ def generate(lang: str, category_key: str, variant: str) -> Dict[str, str]:
             "language": lang,
             "questions": few["questions"][:3],
             "micro_actions": few["micro_actions"][:2],
-            "tone": ("ludique" if (lang == "fr" and variant == "best")
-                     else "sincère" if lang == "fr"
-                     else "playful" if variant == "best"
-                     else "sincere"),
-            "safety_notes": "Reste bienveillant·e, évite les conseils médicaux." if lang == "fr" else "Be kind, avoid medical advice.",
+            "tone": (
+                "ludique"
+                if (lang == "fr" and variant == "best")
+                else "sincère"
+                if lang == "fr"
+                else "playful"
+                if variant == "best"
+                else "sincere"
+            ),
+            "safety_notes": (
+                "Reste bienveillant·e, évite les conseils médicaux."
+                if lang == "fr"
+                else "Be kind, avoid medical advice."
+            ),
         }
-        raw_text = "(local few-shot fallback used)"
 
     normalized = normalize_output(parsed, lang, category_key, variant)
 
-    pretty = [
+    lines: List[str] = [
         f"Category: {normalized['category']} | Lang: {normalized['language']} | Tone: {normalized['tone']}",
         "",
         "Questions:",
-        *[f"• {q}" for q in normalized["questions"]],
-        "",
-        "Micro-actions:",
-        *[f"• {m}" for m in normalized["micro_actions"]],
     ]
+    lines.extend(f"• {q}" for q in normalized["questions"])
+    lines.append("")
+    lines.append("Micro-actions:")
+    lines.extend(f"• {m}" for m in normalized["micro_actions"])
     if normalized.get("safety_notes"):
-        pretty += ["", f"Notes: {normalized['safety_notes']}"]
+        lines.append("")
+        lines.append(f"Notes: {normalized['safety_notes']}")
 
     return {
-        "pretty_text": "\n".join(pretty),
-        "raw_json": json.dumps(normalized, ensure_ascii=False, indent=2)
+        "pretty_text": "\n".join(lines),
+        "raw_json": json.dumps(normalized, ensure_ascii=False, indent=2),
     }
 
 # ────────────────────────────────────────────────────────────────────────────────
-# GRADIO UI
-with gr.Blocks(title="Neurovie – FINGER Question Generator") as demo:
-    gr.Markdown("# Neurovie – FINGER Question Generator")
-    gr.Markdown("Aggressively guided prompts with category-aware examples. Strict JSON, then friendly display.")
-
-    with gr.Row():
-        lang = gr.Radio(choices=["fr", "en"], value="fr", label="Lang / Language")
-        category = gr.Radio(
-            choices=[c["key"] for c in CATEGORIES],
-            value="alimentation",
-            label="Catégorie / Category"
-        )
-        variant = gr.Radio(choices=["best", "sincere"], value="best", label="Variante")
+# UI – minimal, palette-matched, animated
+
+CUSTOM_CSS = """
+:root {
+    --nv-bg: #f6f1ea;
+    --nv-card: #fffdf8;
+    --nv-border: #e3d7c7;
+    --nv-accent: #f27c5e;
+    --nv-accent-soft: #ffe0cf;
+    --nv-accent-teal: #7ab7b7;
+    --nv-text-main: #262626;
+    --nv-text-muted: #6c6459;
+}
+
+/* background + blobs */
+.gradio-container {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
+    background: radial-gradient(circle at top left, #fff5eb 0, #f6f1ea 50%, #f2ede5 100%);
+    max-width: 900px !important;
+    margin: 0 auto !important;
+    padding: 32px 0 40px 0;
+    position: relative;
+}
+
+@keyframes nvBlobFloat {
+    0%   { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.65; }
+    50%  { transform: translate3d(10px, -8px, 0) scale(1.04); opacity: 0.9; }
+    100% { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.65; }
+}
+
+.gradio-container::before,
+.gradio-container::after {
+    content: "";
+    position: fixed;
+    width: 260px;
+    height: 260px;
+    border-radius: 999px;
+    z-index: -1;
+    filter: blur(3px);
+    animation: nvBlobFloat 14s ease-in-out infinite alternate;
+}
+.gradio-container::before {
+    top: -80px;
+    left: -60px;
+    background: radial-gradient(circle at 30% 30%, #ffd1bf, transparent 60%);
+}
+.gradio-container::after {
+    bottom: -120px;
+    right: -40px;
+    background: radial-gradient(circle at 70% 70%, #bfe8ff, transparent 60%);
+    animation-delay: 4s;
+}
+
+/* main card */
+@keyframes nvCardIn {
+    0%   { opacity: 0; transform: translateY(8px) scale(0.98); }
+    100% { opacity: 1; transform: translateY(0)   scale(1); }
+}
+.nv-shell {
+    background: var(--nv-card);
+    border-radius: 32px;
+    border: 1px solid var(--nv-border);
+    box-shadow:
+        0 20px 40px rgba(15, 23, 42, 0.12),
+        0 1px 0 rgba(255, 255, 255, 0.8) inset;
+    padding: 26px 24px 22px;
+    animation: nvCardIn 500ms ease-out;
+}
+
+.nv-badge {
+    font-size: 0.78rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--nv-text-muted);
+}
+.nv-title {
+    font-size: 1.9rem;
+    font-weight: 650;
+    margin-top: 4px;
+}
+.nv-subtitle {
+    font-size: 0.95rem;
+    color: var(--nv-text-muted);
+    margin-top: 6px;
+    margin-bottom: 18px;
+}
 
-    btn = gr.Button("Generate")
+/* sections */
+.nv-section {
+    background: #fbf6ee;
+    border-radius: 24px;
+    border: 1px solid #e6dac7;
+    padding: 16px 16px 14px;
+    margin-bottom: 14px;
+}
+.nv-label {
+    font-size: 0.78rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #a29078;
+    margin-bottom: 8px;
+}
 
-    pretty = gr.Textbox(label="Output", lines=14)
-    raw_json = gr.Code(label="Parsed JSON", language="json")
+/* pills */
+.nv-pills label {
+    border-radius: 999px !important;
+    border: 1px solid #decfbb !important;
+    padding: 6px 11px !important;
+    font-size: 0.84rem !important;
+    background: #fdf8f1;
+    transition: background 150ms ease, transform 120ms ease, box-shadow 120ms ease;
+}
+.nv-pills input:checked + label {
+    background: linear-gradient(135deg, #ffe0cf, #ffd2c0) !important;
+    border-color: var(--nv-accent) !important;
+    color: var(--nv-text-main) !important;
+    box-shadow: 0 4px 10px rgba(242, 124, 94, 0.2);
+    transform: translateY(-1px);
+}
+
+/* button */
+@keyframes nvPulse {
+    0%   { transform: translateY(0) scale(1);   box-shadow: 0 10px 22px rgba(242, 124, 94, 0.30); }
+    50%  { transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 26px rgba(242, 124, 94, 0.40); }
+    100% { transform: translateY(0) scale(1);   box-shadow: 0 10px 22px rgba(242, 124, 94, 0.30); }
+}
+.gr-button {
+    border-radius: 999px !important;
+    padding: 10px 20px !important;
+    font-weight: 600 !important;
+    font-size: 0.96rem !important;
+    border: none !important;
+    background:
+        radial-gradient(circle at 0 0, #ffe0cf, transparent 55%),
+        linear-gradient(135deg, #f6a37d, #f27c5e) !important;
+    color: #fff !important;
+    animation: nvPulse 4s ease-in-out infinite;
+}
+.gr-button:hover {
+    animation-duration: 1.4s;
+}
 
-    def on_click(l, c, v):
-        out = generate(l, c, v)
-        return out["pretty_text"], out["raw_json"]
+/* output fade */
+@keyframes nvFadeIn {
+    0%   { opacity: 0; transform: translateY(4px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+.nv-output {
+    background: #f6f8fc;
+    border-radius: 18px;
+    border: 1px solid #d8e2f2;
+    padding: 14px;
+    font-size: 0.93rem;
+    animation: nvFadeIn 350ms ease-out;
+}
+
+/* code box */
+.nv-json code, .nv-json textarea {
+    border-radius: 16px !important;
+}
+
+/* mobile */
+@media (max-width: 640px) {
+    .nv-shell {
+        border-radius: 24px;
+        padding: 20px 16px 18px;
+    }
+    .nv-title {
+        font-size: 1.6rem;
+    }
+}
+"""
+
+def _map_category(choice: str) -> str:
+    mapping = {
+        "alimentation 🍎": "alimentation",
+        "mouvement 🦘": "mouvement",
+        "cerveau 🧠": "cerveau",
+        "liens 🤝": "liens",
+        "bien-etre 💬": "bien-etre",
+    }
+    return mapping.get(choice, "alimentation")
+
+
+def click_handler(l, c, v):
+    c_key = _map_category(c)
+    out = generate(l, c_key, v)
+    return out["pretty_text"], out["raw_json"]
+
+
+with gr.Blocks(title="Neurovie – Question Studio") as demo:
+    # inject CSS
+    gr.HTML(f"<style>{CUSTOM_CSS}</style>")
+
+    with gr.Column(elem_classes="nv-shell"):
+        gr.HTML(
+            """
+            <div>
+              <div class="nv-badge">NEUROVIE · FINGER</div>
+              <div class="nv-title">Question Studio</div>
+              <div class="nv-subtitle">
+                Minimal prompts for rich conversations — draw 3 questions and 2 micro-actions.
+              </div>
+            </div>
+            """
+        )
 
-    btn.click(on_click, inputs=[lang, category, variant], outputs=[pretty, raw_json])
+        with gr.Row(elem_classes="nv-section"):
+            with gr.Column():
+                gr.HTML("<div class='nv-label'>Language</div>")
+                lang = gr.Radio(
+                    choices=["fr", "en"],
+                    value="fr",
+                    show_label=False,
+                    elem_classes="nv-pills",
+                )
+            with gr.Column():
+                gr.HTML("<div class='nv-label'>Tone</div>")
+                variant = gr.Radio(
+                    choices=["best", "sincere"],
+                    value="best",
+                    show_label=False,
+                    elem_classes="nv-pills",
+                )
+
+        with gr.Column(elem_classes="nv-section"):
+            gr.HTML("<div class='nv-label'>Category</div>")
+            category = gr.Radio(
+                choices=[
+                    "alimentation 🍎",
+                    "mouvement 🦘",
+                    "cerveau 🧠",
+                    "liens 🤝",
+                    "bien-etre 💬",
+                ],
+                value="alimentation 🍎",
+                show_label=False,
+                elem_classes="nv-pills",
+            )
+
+        btn = gr.Button("Generate card set ✨")
+
+        with gr.Column(elem_classes="nv-section"):
+            gr.HTML("<div class='nv-label'>Preview</div>")
+            pretty = gr.Textbox(
+                label="",
+                lines=12,
+                show_label=False,
+                elem_classes="nv-output",
+            )
+
+        with gr.Column(elem_classes=["nv-section", "nv-json"]):
+            gr.HTML("<div class='nv-label'>JSON (for dev)</div>")
+            raw_json = gr.Code(
+                label="",
+                language="json",
+                show_label=False,
+            )
+
+    btn.click(click_handler, [lang, category, variant], [pretty, raw_json])
 
 if __name__ == "__main__":
     demo.launch()