Upload app.py

app.py

@@ -11,7 +11,6 @@ from huggingface_hub import InferenceClient
 MODEL_ID = os.environ.get("MODEL_ID", "meta-llama/Meta-Llama-3.1-8B-Instruct")
 HF_TOKEN = os.environ.get("HF_TOKEN")  # set in Space settings → Repository secrets
 
-# ────────────────────────────────────────────────────────────────────────────────
 CATEGORIES = [
     {"key": "alimentation", "icon": "🍎", "fr": "Alimentation", "en": "Nutrition"},
     {"key": "mouvement",    "icon": "🦘", "fr": "Mouvement",    "en": "Movement"},
@@ -20,25 +19,24 @@ CATEGORIES = [
     {"key": "bien-etre",    "icon": "💬", "fr": "Bien-être",    "en": "Well-being"},
 ]
 
-# Category-specific guidance (stronger prompt conditioning)
 GUIDES = {
     "fr": {
-        "alimentation": "Focalise sur des habitudes simples: hydratation, fruits/légumes, rythme des repas, portions, collations intelligentes. Pas de régime strict, pas de moralisation.",
-        "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.",
+        "alimentation": "Habitudes simples: hydratation, fruits/légumes, collations, rythme des repas. Pas de régime strict, pas de moralisation.",
+        "mouvement": "Mouvement du quotidien: marche, escaliers, étirements courts, pauses actives. Pas de performance sportive.",
+        "cerveau": "Stimulation douce: curiosité, respiration, mini-jeux, petit apprentissage. Zéro jargon médical.",
+        "liens": "Interactions simples: gratitude, messages courts, appels brefs, moments partagés. Ton chaleureux, inclusif.",
+        "bien-etre": "Micro bien-être: pauses, sommeil régulier, respirations, petits rituels qui apaisent. Jamais culpabilisant.",
     },
     "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.",
+        "alimentation": "Simple habits: hydration, fruit/veg, snacks, meal rhythm. No strict diets, no moralizing.",
+        "mouvement": "Daily movement: walking, stairs, light stretches, active breaks. No performance pressure.",
+        "cerveau": "Gentle stimulation: curiosity, breathing, tiny games, small learning moments. No medical jargon.",
+        "liens": "Simple connections: gratitude, short texts, quick calls, shared moments. Warm and inclusive tone.",
+        "bien-etre": "Micro well-being: breaks, sleep rhythm, breathing, tiny soothing rituals. Never guilt-based.",
     },
 }
 
-# Few-shot examples to anchor style (one per category per language)
+# Few-shot examples: now 4 questions each
 FEWSHOTS = {
     "fr": {
         "alimentation": {
@@ -46,6 +44,7 @@ FEWSHOTS = {
                 "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 ?",
+                "Quelle petite habitude t’aide à ne pas sauter de repas ?",
             ],
             "micro_actions": [
                 "Remplir une gourde ce matin.",
@@ -57,6 +56,7 @@ FEWSHOTS = {
                 "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) ?",
+                "Quel moment conviendrait pour quelques étirements doux chaque jour ?",
             ],
             "micro_actions": [
                 "Monter un étage par les escaliers aujourd’hui.",
@@ -68,6 +68,7 @@ FEWSHOTS = {
                 "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 petit sujet aimerais-tu explorer cette semaine ?",
             ],
             "micro_actions": [
                 "Programmer un minuteur de 3 minutes pour respirer.",
@@ -79,6 +80,7 @@ FEWSHOTS = {
                 "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 aimerais-tu avoir une vraie conversation bientôt ?",
             ],
             "micro_actions": [
                 "Envoyer un message de gratitude à une personne.",
@@ -90,6 +92,7 @@ FEWSHOTS = {
                 "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 ?",
+                "Qu’est-ce qui t’aide à te sentir plus léger·e en fin de journée ?",
             ],
             "micro_actions": [
                 "Éteindre les écrans 10 minutes plus tôt ce soir.",
@@ -103,6 +106,7 @@ FEWSHOTS = {
                 "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?",
+                "What tiny habit helps you not skip meals?",
             ],
             "micro_actions": [
                 "Fill a water bottle this morning.",
@@ -114,6 +118,7 @@ FEWSHOTS = {
                 "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)?",
+                "When would a short stretch break feel good each day?",
             ],
             "micro_actions": [
                 "Take one flight of stairs today.",
@@ -125,6 +130,7 @@ FEWSHOTS = {
                 "What sparked your curiosity today?",
                 "When could you do 3 minutes of breathing?",
                 "Which mini-game wakes you up (e.g., 3 crossword clues)?",
+                "What small topic would you like to learn about this week?",
             ],
             "micro_actions": [
                 "Set a 3-minute timer to breathe.",
@@ -136,6 +142,7 @@ FEWSHOTS = {
                 "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 would you like to have a real conversation with soon?",
             ],
             "micro_actions": [
                 "Send a gratitude message to one person.",
@@ -147,6 +154,7 @@ FEWSHOTS = {
                 "What cue tells you it’s time for a pause?",
                 "What 2-minute routine helps you reset?",
                 "What time supports a steadier bedtime?",
+                "What helps you feel lighter at the end of the day?",
             ],
             "micro_actions": [
                 "Turn screens off 10 minutes earlier tonight.",
@@ -157,7 +165,7 @@ FEWSHOTS = {
 }
 
 # ────────────────────────────────────────────────────────────────────────────────
-# PROMPT & MODEL HELPERS
+# PROMPT & MODEL
 
 
 def build_prompt(lang: str, category_key: str, variant: str) -> str:
@@ -170,21 +178,22 @@ def build_prompt(lang: str, category_key: str, variant: str) -> str:
     few = FEWSHOTS[lang][category_key]
 
     variant_fr = (
-        "Contrainte de ton: ludique et original (‘meilleur’)."
+        "Ton: ludique et original (‘meilleur’)."
         if variant == "best"
-        else "Contrainte de ton: introspectif et authentique (‘plus sincère’)."
+        else "Ton: introspectif et authentique (‘plus sincère’)."
     )
     variant_en = (
-        "Tone constraint: playful and original (‘best’)."
+        "Tone: playful and original (‘best’)."
         if variant == "best"
-        else "Tone constraint: introspective and authentic (‘most sincere’)."
+        else "Tone: introspective and authentic (‘most sincere’)."
     )
 
+    # 4 questions now
     schema = (
         "{\n"
         '  "category": "<category_key>",\n'
         '  "language": "<fr|en>",\n'
-        '  "questions": ["q1", "q2", "q3"],\n'
+        '  "questions": ["q1", "q2", "q3", "q4"],\n'
         '  "micro_actions": ["m1", "m2"],\n'
         '  "tone": "playful|sincere|ludique|sincère",\n'
         '  "safety_notes": "short coaching tips"\n'
@@ -194,62 +203,43 @@ def build_prompt(lang: str, category_key: str, variant: str) -> str:
     if lang == "fr":
         system = (
             "Tu es l’IA du jeu de cartes Neurovie, inspiré du modèle FINGER. "
-            "Une carte = une question sur les routines (alimentation, mouvement, cerveau, liens, bien-être)."
-        )
-        rules = (
-            "Mode d’emploi (style 7 familles):\n"
-            "- Demande une carte (catégorie FINGER) avec une question précise.\n"
-            "- 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."
+            "Une carte = une question sur les routines du quotidien."
         )
         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"
+            "Règles:\n"
+            "- Pas de conseils médicaux ni de diagnostics.\n"
+            "- Langage bienveillant, inclusif, concret.\n"
+            "- Phrases courtes, sans emojis.\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"
-            "Respecte le schéma JSON ci-dessous. Imites le style, pas le contenu exact, des exemples.\n"
+            f"Focus: {guide}\n"
+            "Génère 4 QUESTIONS et 2 MICRO-ACTIONS, chacune en une phrase.\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"
+            f"Schéma JSON strict:\n{schema}\n"
             "RENVOIE UNIQUEMENT DU JSON VALIDE."
         )
-        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. "
-            "One card = one question about daily routines (nutrition, movement, brain, connections, well-being)."
-        )
-        rules = (
-            "How to play (7-families style):\n"
-            "- Ask for a specific card (FINGER category) using a clear question.\n"
-            "- 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."
+            "One card = one question about daily routines."
         )
         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"
+            "Rules:\n"
+            "- No medical advice or diagnosis.\n"
+            "- Kind, concrete, inclusive language.\n"
+            "- Short sentences, no emojis.\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"
-            "Follow the JSON schema below. Imitate style, not exact wording, of examples.\n"
+            f"Focus: {guide}\n"
+            "Generate 4 QUESTIONS and 2 MICRO-ACTIONS, one sentence each.\n"
             f"Style examples (do not copy verbatim): questions={few['questions']} micro_actions={few['micro_actions']}\n"
-            "Strict JSON schema:\n"
-            f"{schema}\n"
+            f"Strict JSON schema:\n{schema}\n"
             "RETURN VALID JSON ONLY."
         )
-        return f"{system}\n\n{rules}\n\n{safety}\n\n{user}"
+
+    return f"{system}\n\n{safety}\n\n{user}"
 
 
 def try_parse_json(text: str) -> Optional[Dict[str, Any]]:
@@ -270,7 +260,8 @@ def normalize_output(
     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]
+    # exactly 4 questions, 2 micro-actions
+    q = (q + [""] * 4)[:4]
     m = (m + [""] * 2)[:2]
 
     if not data.get("tone"):
@@ -302,7 +293,6 @@ def normalize_output(
 def model_call(prompt: str) -> str:
     client = InferenceClient(model=MODEL_ID, token=HF_TOKEN)
 
-    # Try chat-style first
     try:
         resp = client.chat.completions.create(
             model=MODEL_ID,
@@ -326,7 +316,6 @@ def model_call(prompt: str) -> str:
     except Exception:
         pass
 
-    # Fallback to text_generation
     return client.text_generation(
         prompt,
         max_new_tokens=220,
@@ -336,7 +325,7 @@ def model_call(prompt: str) -> str:
     ).strip()
 
 
-def generate(lang: str, category_key: str, variant: str) -> Dict[str, str]:
+def generate(lang: str, category_key: str, variant: str) -> Dict[str, Any]:
     prompt = build_prompt(lang, category_key, variant)
 
     raw_text = None
@@ -352,7 +341,7 @@ def generate(lang: str, category_key: str, variant: str) -> Dict[str, str]:
         parsed = {
             "category": category_key,
             "language": lang,
-            "questions": few["questions"][:3],
+            "questions": few["questions"][:4],
             "micro_actions": few["micro_actions"][:2],
             "tone": (
                 "ludique"
@@ -372,55 +361,44 @@ def generate(lang: str, category_key: str, variant: str) -> Dict[str, str]:
 
     normalized = normalize_output(parsed, lang, category_key, variant)
 
-    lines: List[str] = [
-        f"Category: {normalized['category']} | Lang: {normalized['language']} | Tone: {normalized['tone']}",
-        "",
-        "Questions:",
-    ]
-    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"):
-        lines.append("")
-        lines.append(f"Notes: {normalized['safety_notes']}")
-
     return {
-        "pretty_text": "\n".join(lines),
+        "questions": normalized["questions"],
+        "micro_actions": normalized["micro_actions"],
         "raw_json": json.dumps(normalized, ensure_ascii=False, indent=2),
     }
 
 # ────────────────────────────────────────────────────────────────────────────────
-# UI – minimal, palette-matched, animated
+# UI – pastel, animated, cards
+
 
 CUSTOM_CSS = """
 :root {
-    --nv-bg: #f6f1ea;
+    --nv-bg: #f7f2ec;
     --nv-card: #fffdf8;
-    --nv-border: #e3d7c7;
-    --nv-accent: #f27c5e;
-    --nv-accent-soft: #ffe0cf;
-    --nv-accent-teal: #7ab7b7;
+    --nv-border: #e5d8c7;
+    --nv-accent: #f38a6b;
+    --nv-accent-soft: #ffe4d4;
+    --nv-accent-teal: #9fcfd1;
+    --nv-accent-lilac: #d9c7f2;
     --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;
+    background: radial-gradient(circle at top left, #fff6ee 0, #f7f2ec 50%, #f2ece6 100%);
+    max-width: 960px !important;
     margin: 0 auto !important;
     padding: 32px 0 40px 0;
     position: relative;
 }
 
+/* blobs */
 @keyframes nvBlobFloat {
-    0%   { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.65; }
+    0%   { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.6; }
     50%  { transform: translate3d(10px, -8px, 0) scale(1.04); opacity: 0.9; }
-    100% { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.65; }
+    100% { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.6; }
 }
-
 .gradio-container::before,
 .gradio-container::after {
     content: "";
@@ -435,16 +413,16 @@ CUSTOM_CSS = """
 .gradio-container::before {
     top: -80px;
     left: -60px;
-    background: radial-gradient(circle at 30% 30%, #ffd1bf, transparent 60%);
+    background: radial-gradient(circle at 30% 30%, #ffd5c5, transparent 60%);
 }
 .gradio-container::after {
     bottom: -120px;
     right: -40px;
-    background: radial-gradient(circle at 70% 70%, #bfe8ff, transparent 60%);
+    background: radial-gradient(circle at 70% 70%, #c3e4ff, transparent 60%);
     animation-delay: 4s;
 }
 
-/* main card */
+/* main shell */
 @keyframes nvCardIn {
     0%   { opacity: 0; transform: translateY(8px) scale(0.98); }
     100% { opacity: 1; transform: translateY(0)   scale(1); }
@@ -504,18 +482,18 @@ CUSTOM_CSS = """
     transition: background 150ms ease, transform 120ms ease, box-shadow 120ms ease;
 }
 .nv-pills input:checked + label {
-    background: linear-gradient(135deg, #ffe0cf, #ffd2c0) !important;
+    background: linear-gradient(135deg, #ffe4d4, #ffd6c6) !important;
     border-color: var(--nv-accent) !important;
     color: var(--nv-text-main) !important;
-    box-shadow: 0 4px 10px rgba(242, 124, 94, 0.2);
+    box-shadow: 0 4px 10px rgba(243, 138, 107, 0.18);
     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); }
+    0%   { transform: translateY(0) scale(1);   box-shadow: 0 10px 22px rgba(243, 138, 107, 0.30); }
+    50%  { transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 26px rgba(243, 138, 107, 0.40); }
+    100% { transform: translateY(0) scale(1);   box-shadow: 0 10px 22px rgba(243, 138, 107, 0.30); }
 }
 .gr-button {
     border-radius: 999px !important;
@@ -524,8 +502,8 @@ CUSTOM_CSS = """
     font-size: 0.96rem !important;
     border: none !important;
     background:
-        radial-gradient(circle at 0 0, #ffe0cf, transparent 55%),
-        linear-gradient(135deg, #f6a37d, #f27c5e) !important;
+        radial-gradient(circle at 0 0, #ffe4d4, transparent 55%),
+        linear-gradient(135deg, #f6a37d, #f38a6b) !important;
     color: #fff !important;
     animation: nvPulse 4s ease-in-out infinite;
 }
@@ -533,21 +511,43 @@ CUSTOM_CSS = """
     animation-duration: 1.4s;
 }
 
-/* output fade */
-@keyframes nvFadeIn {
-    0%   { opacity: 0; transform: translateY(4px); }
-    100% { opacity: 1; transform: translateY(0); }
+/* cards */
+@keyframes nvCardFloat {
+    0%   { transform: translateY(0); }
+    50%  { transform: translateY(-2px); }
+    100% { transform: translateY(0); }
+}
+.nv-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+    gap: 10px;
 }
-.nv-output {
-    background: #f6f8fc;
+.nv-card {
+    background: #ffffff;
     border-radius: 18px;
-    border: 1px solid #d8e2f2;
-    padding: 14px;
-    font-size: 0.93rem;
-    animation: nvFadeIn 350ms ease-out;
+    padding: 10px 11px;
+    font-size: 0.9rem;
+    border: 1px solid rgba(0,0,0,0.03);
+    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
+    animation: nvCardFloat 6s ease-in-out infinite;
+}
+.nv-card[data-kind="question"] {
+    background: radial-gradient(circle at 0 0, #f9ecff 0, #ffffff 60%);
+    border-color: #e0d2f5;
+}
+.nv-card[data-kind="micro"] {
+    background: radial-gradient(circle at 0 0, #e6f7f8 0, #ffffff 60%);
+    border-color: #cfe6e6;
+}
+.nv-card-title {
+    font-size: 0.72rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #9a8fb6;
+    margin-bottom: 4px;
 }
 
-/* code box */
+/* JSON box */
 .nv-json code, .nv-json textarea {
     border-radius: 16px !important;
 }
@@ -578,11 +578,15 @@ def _map_category(choice: str) -> str:
 def click_handler(l, c, v):
     c_key = _map_category(c)
     out = generate(l, c_key, v)
-    return out["pretty_text"], out["raw_json"]
+    qs = out["questions"]
+    ms = out["micro_actions"]
+    # safely index
+    q_cards = [qs[i] if i < len(qs) else "" for i in range(4)]
+    m_cards = [ms[i] if i < len(ms) else "" for i in range(2)]
+    return (*q_cards, *m_cards, 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"):
@@ -592,12 +596,13 @@ with gr.Blocks(title="Neurovie – Question Studio") as demo:
               <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.
+                Minimal prompts for rich conversations — draw 4 questions and 2 micro-actions.
               </div>
             </div>
             """
         )
 
+        # Settings
         with gr.Row(elem_classes="nv-section"):
             with gr.Column():
                 gr.HTML("<div class='nv-label'>Language</div>")
@@ -633,15 +638,28 @@ with gr.Blocks(title="Neurovie – Question Studio") as demo:
 
         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",
-            )
+        # Preview cards
+        with gr.Row(elem_classes="nv-section"):
+            with gr.Column():
+                gr.HTML("<div class='nv-label'>Questions</div>")
+                q1 = gr.HTML("<div class='nv-card' data-kind='question'><div class='nv-card-title'>Question 1</div><div></div></div>")
+                q2 = gr.HTML("<div class='nv-card' data-kind='question'><div class='nv-card-title'>Question 2</div><div></div></div>")
+                q3 = gr.HTML("<div class='nv-card' data-kind='question'><div class='nv-card-title'>Question 3</div><div></div></div>")
+                q4 = gr.HTML("<div class='nv-card' data-kind='question'><div class='nv-card-title'>Question 4</div><div></div></div>")
+                # wrap them in a grid via simple container
+                gr.HTML(
+                    """
+                    <script>
+                    // no-op: cards already styled; JS kept minimal
+                    </script>
+                    """
+                )
+            with gr.Column():
+                gr.HTML("<div class='nv-label'>Micro-actions</div>")
+                m1 = gr.HTML("<div class='nv-card' data-kind='micro'><div class='nv-card-title'>Micro-action 1</div><div></div></div>")
+                m2 = gr.HTML("<div class='nv-card' data-kind='micro'><div class='nv-card-title'>Micro-action 2</div><div></div></div>")
 
+        # JSON output (for dev)
         with gr.Column(elem_classes=["nv-section", "nv-json"]):
             gr.HTML("<div class='nv-label'>JSON (for dev)</div>")
             raw_json = gr.Code(
@@ -650,7 +668,32 @@ with gr.Blocks(title="Neurovie – Question Studio") as demo:
                 show_label=False,
             )
 
-    btn.click(click_handler, [lang, category, variant], [pretty, raw_json])
+    # we update the inner HTML of the cards using a small template in Python
+    def update_cards(l, c, v):
+        texts = click_handler(l, c, v)
+        qs = texts[:4]
+        ms = texts[4:6]
+        json_str = texts[6]
+
+        def card_html(kind, title, body):
+            kind_attr = "question" if kind == "q" else "micro"
+            return f"<div class='nv-card' data-kind='{kind_attr}'><div class='nv-card-title'>{title}</div><div>{body}</div></div>"
+
+        return (
+            card_html("q", "Question 1", qs[0]),
+            card_html("q", "Question 2", qs[1]),
+            card_html("q", "Question 3", qs[2]),
+            card_html("q", "Question 4", qs[3]),
+            card_html("m", "Micro-action 1", ms[0]),
+            card_html("m", "Micro-action 2", ms[1]),
+            json_str,
+        )
+
+    btn.click(
+        update_cards,
+        [lang, category, variant],
+        [q1, q2, q3, q4, m1, m2, raw_json],
+    )
 
 if __name__ == "__main__":
     demo.launch()