Upload 2 files

app.py

@@ -55,6 +55,23 @@ GUIDES = {
 # Themes
 THEME_KEYS = ["family", "friends", "romance", "silly", "education"]
 
+THEME_LABELS = {
+    "fr": {
+        "family": "famille",
+        "friends": "amis",
+        "romance": "romance",
+        "silly": "décalé",
+        "education": "éducation",
+    },
+    "en": {
+        "family": "family",
+        "friends": "friends",
+        "romance": "romance",
+        "silly": "silly",
+        "education": "education",
+    },
+}
+
 THEME_DESCRIPTIONS = {
     "fr": {
         "family": "Thème famille : liens intergénérationnels, rituels familiaux, souvenirs partagés.",
@@ -650,6 +667,25 @@ def _map_category(choice: str) -> str:
     }
     return mapping.get(choice, "alimentation")
 
+def _map_theme(label: str, lang: str) -> str:
+    """
+    Convert the user-visible theme label back to its internal key.
+    Works for both languages and also accepts the key itself as fallback.
+    """
+    label = (label or "").strip().lower()
+
+    # First check if it's already a key
+    if label in THEME_KEYS:
+        return label
+
+    # Otherwise map via THEME_LABELS
+    for key in THEME_KEYS:
+        if label == THEME_LABELS["fr"][key].lower() or label == THEME_LABELS["en"][key].lower():
+            return key
+
+    # Fallback
+    return "family"
+
 
 def _card_html(category_key: str, kind: str, title: str, body: str, delay_s: float) -> str:
     kind_attr = "question" if kind == "q" else "micro"
@@ -662,9 +698,10 @@ def _card_html(category_key: str, kind: str, title: str, body: str, delay_s: flo
     )
 
 
-def update_cards(lang: str, category_choice: str, theme: str, seen: List[str]):
+def update_cards(lang: str, category_choice: str, theme_choice: str, seen: List[str]):
     category_key = _map_category(category_choice)
-    result = get_questions_and_micro(lang, category_key, theme, seen or [])
+    theme_key = _map_theme(theme_choice, lang)
+    result = get_questions_and_micro(lang, category_key, theme_key, seen or [])
     questions = result["questions"]
     micro = result["micro_actions"]
     new_seen = result["seen"]
@@ -716,13 +753,13 @@ def update_cards(lang: str, category_choice: str, theme: str, seen: List[str]):
 def get_ui_texts(lang: str) -> Dict[str, Any]:
     if lang == "fr":
         header = """
-         <div class="nv-fade">
-         <div class="nv-badge">NEUROVIE · FINGER</div>
-         <div class="nv-title">Question Studio</div>
-         <div class="nv-subtitle">
-          Questions minimalistes pour conversations riches — 4 questions et 2 micro-actions par tirage.
+        <div class="nv-fade">
+          <div class="nv-badge">NEUROVIE · FINGER</div>
+          <div class="nv-title">Question Studio</div>
+          <div class="nv-subtitle">
+            Questions minimalistes pour conversations riches — 4 questions et 2 micro-actions par tirage.
           </div>
-     </div>
+        </div>
     """
 
         category_choices = [
@@ -732,6 +769,7 @@ def get_ui_texts(lang: str) -> Dict[str, Any]:
             "liens 🤝",
             "bien-etre 💬",
         ]
+        theme_choices = [THEME_LABELS["fr"][k] for k in THEME_KEYS]
         return {
             "header_html": header,
             "language_label": "Langue",
@@ -742,6 +780,8 @@ def get_ui_texts(lang: str) -> Dict[str, Any]:
             "button_text": "Générer un tirage ✨",
             "category_choices": category_choices,
             "category_default": "alimentation 🍎",
+            "theme_choices": theme_choices,
+            "theme_default": THEME_LABELS["fr"]["family"],
         }
     else:
         header = """
@@ -761,6 +801,7 @@ def get_ui_texts(lang: str) -> Dict[str, Any]:
             "Connections 🤝",
             "Well-being 💬",
         ]
+        theme_choices = [THEME_LABELS["en"][k] for k in THEME_KEYS]
         return {
             "header_html": header,
             "language_label": "Language",
@@ -771,6 +812,8 @@ def get_ui_texts(lang: str) -> Dict[str, Any]:
             "button_text": "Generate card set ✨",
             "category_choices": category_choices,
             "category_default": "Nutrition 🍎",
+            "theme_choices": theme_choices,
+            "theme_default": THEME_LABELS["en"]["family"],
         }
 
 
@@ -783,13 +826,15 @@ def update_ui_language(lang: str):
         f"<div class='nv-label nv-fade'>{t['category_label']}</div>",
         f"<div class='nv-label nv-fade'>{t['questions_label']}</div>",
         f"<div class='nv-label nv-fade'>{t['micro_label']}</div>",
+        gr.update(choices=t["theme_choices"], value=t["theme_default"]),
         gr.update(choices=t["category_choices"], value=t["category_default"]),
-        gr.update(value=t['button_text']),
+        gr.update(value=t["button_text"]),
     )
 
 
 
 
+
 # ───────────────────────────────────────────────────────���────────────────────────
 # GRADIO APP
 
@@ -798,6 +843,92 @@ with gr.Blocks(title="Neurovie – Question Studio") as demo:
     # Inline the CSS content from style.css
     if CUSTOM_CSS:
         gr.HTML(f"<style>{CUSTOM_CSS}</style>")
+        gr.HTML(
+        """
+        <script>
+        (function () {
+          // Initialize fading behaviour on any .nv-card found under `root`
+          function initCardFading(root) {
+            const cards = (root || document).querySelectorAll('.nv-card');
+            cards.forEach((card) => {
+              if (card.dataset.fadeInit === '1') return;
+              card.dataset.fadeInit = '1';
+
+              // initial opacity
+              if (!card.dataset.opacity) {
+                card.dataset.opacity = '1';
+                card.style.opacity = 1;
+              }
+
+              // track hover state
+              card.addEventListener('mouseenter', () => {
+                card.dataset.hover = '1';
+              });
+
+              card.addEventListener('mouseleave', () => {
+                card.dataset.hover = '0';
+                // fast fade step when the user leaves the card
+                let current = parseFloat(card.dataset.opacity || '1');
+                // ~7% per hover, never below 0.25
+                let next = Math.max(0.25, current - 0.07);
+                card.dataset.opacity = String(next);
+                card.style.opacity = next;
+              });
+            });
+          }
+
+          // run once on page load
+          window.addEventListener('load', () => {
+            initCardFading(document);
+          });
+
+          // Watch for new cards when a new set is generated
+          const observer = new MutationObserver((mutations) => {
+            for (const m of mutations) {
+              if (!m.addedNodes) continue;
+              m.addedNodes.forEach((node) => {
+                if (!(node instanceof HTMLElement)) return;
+                if (node.classList.contains('nv-card') || node.querySelector('.nv-card')) {
+                  initCardFading(node);
+                }
+              });
+            }
+          });
+
+          observer.observe(document.documentElement || document.body, {
+            childList: true,
+            subtree: true
+          });
+
+          // ─────────────────────────────────────────────
+          // Slow background fading over time
+          // ─────────────────────────────────────────────
+          // Every 20 seconds, gently fade all cards that are not currently hovered.
+          // Much slower than the hover fade step above.
+          const TIME_STEP_MS = 20000;   // 20s
+          const TIME_DECAY   = 0.02;    // ~2% per tick
+
+          setInterval(() => {
+            const cards = document.querySelectorAll('.nv-card');
+            cards.forEach((card) => {
+              let current = parseFloat(card.dataset.opacity || '1');
+              if (isNaN(current)) current = 1;
+
+              // don't fade if already very faint
+              if (current <= 0.25) return;
+
+              // don't fade while actively hovered
+              if (card.dataset.hover === '1') return;
+
+              let next = Math.max(0.25, current - TIME_DECAY);
+              card.dataset.opacity = String(next);
+              card.style.opacity = next;
+            });
+          }, TIME_STEP_MS);
+        })();
+        </script>
+        """
+    )
 
     seen_state = gr.State([])  # per-session list of seen questions
 
@@ -827,14 +958,15 @@ with gr.Blocks(title="Neurovie – Question Studio") as demo:
             f"<div class='nv-label nv-fade'>{ui_texts['theme_label']}</div>"
         )
         theme = gr.Radio(
-            choices=THEME_KEYS,
-            value="family",
+            choices=ui_texts["theme_choices"],
+            value=ui_texts["theme_default"],
             show_label=False,
             elem_classes="nv-pills",
         )
 
 
 
+
         with gr.Column(elem_classes="nv-section"):
             category_label_html = gr.HTML(f"<div class='nv-label nv-fade'>{ui_texts['category_label']}</div>")
             category = gr.Radio(
@@ -872,6 +1004,7 @@ with gr.Blocks(title="Neurovie – Question Studio") as demo:
             category_label_html,
             questions_label_html,
             micro_label_html,
+            theme,
             category,
             btn,
         ],
@@ -887,4 +1020,4 @@ with gr.Blocks(title="Neurovie – Question Studio") as demo:
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=False)

style.css

@@ -151,6 +151,21 @@
     box-shadow 120ms ease;
 }
 
+/* Center all radio pill groups */
+.nv-pills {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 10px;
+}
+
+/* Center the inner column for language, theme, category sections */
+.nv-section > .gr-column,
+.nv-section > .gr-row {
+    justify-content: center !important;
+    text-align: center;
+}
+
+
 .nv-pills input:checked + label {
   background: linear-gradient(135deg, #ffe4d4, #ffd6c6) !important;
   border-color: var(--nv-accent) !important;