Upload app.py

app.py

@@ -599,7 +599,7 @@ def get_questions_and_micro(
         if q:
             seen_set.add(q)
 
-    payload = {
+        payload = {
         "category": category_key,
         "language": lang,
         "questions": questions,
@@ -608,228 +608,20 @@ def get_questions_and_micro(
         "tone": tone,
         "safety_notes": safety_notes,
     }
+
+# If you ever need the payload again, you can use it here;
+# for the UI we only return questions + micro + updated seen.
     return {
-        "questions": questions,
-        "micro_actions": micro,
-        "raw_json": json.dumps(payload, ensure_ascii=False, indent=2),
-        "seen": list(seen_set),
-    }
+    "questions": questions,
+    "micro_actions": micro,
+    "seen": list(seen_set),
+}
 
 
 # ────────────────────────────────────────────────────────────────────────────────
 # UI – pastel, animated, color-coded cards
 
 
-CUSTOM_CSS = """
-:root {
-    --nv-bg: #f7f2ec;
-    --nv-card: #fffdf8;
-    --nv-border: #e5d8c7;
-    --nv-accent: #f38a6b;
-    --nv-accent-soft: #ffe4d4;
-    --nv-text-main: #262626;
-    --nv-text-muted: #6c6459;
-}
-
-/* page */
-.gradio-container {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
-    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;
-}
-
-/* floating blobs */
-@keyframes nvBlobFloat {
-    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.6; }
-}
-.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%, #ffd5c5, transparent 60%);
-}
-.gradio-container::after {
-    bottom: -120px;
-    right: -40px;
-    background: radial-gradient(circle at 70% 70%, #c3e4ff, transparent 60%);
-    animation-delay: 4s;
-}
-
-/* main panel */
-@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;
-}
-
-/* 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;
-}
-
-/* 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, #ffe4d4, #ffd6c6) !important;
-    border-color: var(--nv-accent) !important;
-    color: var(--nv-text-main) !important;
-    box-shadow: 0 4px 10px rgba(243, 138, 107, 0.18);
-    transform: translateY(-1px);
-}
-
-/* button (breathing) */
-@keyframes nvPulse {
-    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;
-    padding: 10px 20px !important;
-    font-weight: 600 !important;
-    font-size: 0.96rem !important;
-    border: none !important;
-    background:
-        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;
-}
-.gr-button:hover {
-    animation-duration: 1.4s;
-}
-
-/* cards grid */
-.nv-card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
-    gap: 10px;
-}
-
-/* deal animation */
-@keyframes nvCardDeal {
-    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); }
-    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
-}
-.nv-card {
-    border-radius: 18px;
-    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);
-    opacity: 0;
-    transform: scale(0.7);
-    animation: nvCardDeal 420ms ease-out forwards;
-}
-
-/* color-coded by category */
-.nv-card--cat-alimentation {
-    background: radial-gradient(circle at 0 0, #e3f7df 0, #ffffff 60%);
-    border-color: #c3e5bc;
-}
-.nv-card--cat-mouvement {
-    background: radial-gradient(circle at 0 0, #dbeeff 0, #ffffff 60%);
-    border-color: #b9d8ff;
-}
-.nv-card--cat-cerveau {
-    background: radial-gradient(circle at 0 0, #ffd6d6 0, #ffffff 60%);
-    border-color: #f7b6b6;
-}
-.nv-card--cat-liens {
-    background: radial-gradient(circle at 0 0, #ffead1 0, #ffffff 60%);
-    border-color: #f6d2a3;
-}
-.nv-card--cat-bien-etre {
-    background: radial-gradient(circle at 0 0, #ffe1f2 0, #ffffff 60%);
-    border-color: #f3c3e4;
-}
-
-.nv-card-title {
-    font-size: 0.72rem;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: #7c6a9a;
-    margin-bottom: 4px;
-}
-
-/* JSON 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",
@@ -857,7 +649,6 @@ def update_cards(lang: str, category_choice: str, variant: str, seen: List[str])
     result = get_questions_and_micro(lang, category_key, variant, seen or [])
     questions = result["questions"]
     micro = result["micro_actions"]
-    raw_json = result["raw_json"]
     new_seen = result["seen"]
 
     # Stagger cards a bit
@@ -890,7 +681,7 @@ def update_cards(lang: str, category_choice: str, variant: str, seen: List[str])
             )
         )
 
-    return (*q_htmls, *m_htmls, raw_json, new_seen)
+    return (*q_htmls, *m_htmls, new_seen)
 
 
 # ────────────────────────────────────────────────────────────────────────────────
@@ -898,7 +689,8 @@ def update_cards(lang: str, category_choice: str, variant: str, seen: List[str])
 
 
 with gr.Blocks(title="Neurovie – Question Studio") as demo:
-    gr.HTML(f"<style>{CUSTOM_CSS}</style>")
+    # Load external CSS file
+    gr.HTML("<link rel='stylesheet' href='style.css'>")
 
     seen_state = gr.State([])  # per-session list of seen questions
 
@@ -966,20 +758,15 @@ with gr.Blocks(title="Neurovie – Question Studio") as demo:
                     m1 = gr.HTML()
                     m2 = gr.HTML()
 
-        # 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(
-                label="",
-                language="json",
-                show_label=False,
-            )
+        
 
     btn.click(
-        update_cards,
-        [lang, category, variant, seen_state],
-        [q1, q2, q3, q4, m1, m2, raw_json, seen_state],
-    )
+    update_cards,
+    [lang, category, variant, seen_state],
+    [q1, q2, q3, q4, m1, m2, seen_state],
+    show_progress=False,  # hide Gradio built-in progress indicator
+)
+
 
 if __name__ == "__main__":
     demo.launch()