feat: FLUX image generation moved to End Session modal as session visual summary

app.py

@@ -160,7 +160,9 @@ body { background: #0A0F1E !important; margin: 0 !important; }
 #hidden-chunk-output,
 #hidden-mcq-trigger,
 #hidden-mcq-output,
-#hidden-language-box {
+#hidden-language-box,
+#hidden-session-topics,
+#hidden-generate-session-image-btn {
     position: fixed !important;
     top: -9999px !important;
     left: -9999px !important;
@@ -346,16 +348,13 @@ def submit_answer(question, chunk, student_answer, correct, total, language):
 
 
 @spaces.GPU(duration=120)
-def generate_image_fn(question, feedback):
-    if not question or not feedback:
-        return None
-    low = feedback.strip().lower()
-    if low.startswith("erreur") or low.startswith("⚠"):
+def generate_image_fn(topics):
+    if not topics or not topics.strip():
         return None
     try:
-        concept = question.strip().replace("\n", " ")[:200]
-        print(f"[generate_image_fn] generating illustration for: {concept[:80]!r}")
-        return generate_concept_image(concept)
+        prompt = f"Visual summary of a study session covering: {topics.strip()}"
+        print(f"[generate_image_fn] generating session illustration for: {prompt[:120]!r}")
+        return generate_concept_image(prompt)
     except Exception as e:
         import traceback; traceback.print_exc()
         print(f"[generate_image_fn] failed: {e}")
@@ -378,7 +377,7 @@ BRIDGE_JS = """() => {
     mode: 'open',
     mcqData: null,
     waitingMCQ: false, prevMCQ: '',
-    lastConceptImg: '',
+    imgPoll: null,
   };
   const $ = id => document.getElementById(id);
 
@@ -430,7 +429,9 @@ BRIDGE_JS = """() => {
     return true;
   }
   function clickGradioBtn(sel) {
-    const btn = document.querySelector(sel + ' button');
+    const el = document.querySelector(sel);
+    if (!el) return false;
+    const btn = el.tagName === 'BUTTON' ? el : el.querySelector('button');
     if (btn) { btn.click(); return true; } return false;
   }
 
@@ -482,19 +483,39 @@ BRIDGE_JS = """() => {
     return verdict;
   }
 
-  // ── Concept image ──────────────────────────────────────────────────────────
-  function hideConceptImage() {
-    const wrap = $('concept-image-display');
-    if (wrap) { wrap.classList.add('hidden'); wrap.classList.remove('fade-in-up'); }
+  // ── Session image (shown in the End Session modal) ────────────────────────
+  function stopSessionImagePoll() {
+    if (S.imgPoll) { clearInterval(S.imgPoll); S.imgPoll = null; }
+    $('modal-image-loading')?.classList.add('hidden');
   }
 
-  function showConceptImage(src) {
-    const wrap = $('concept-image-display'), img = $('concept-image');
-    if (!wrap || !img) return;
-    img.src = src;
-    wrap.classList.remove('hidden');
-    void wrap.offsetWidth; // restart fade-in animation
-    wrap.classList.add('fade-in-up');
+  function startSessionImage() {
+    const sec = $('modal-session-image'), loading = $('modal-image-loading'), img = $('session-image');
+    if (!sec || !loading || !img) return;
+    stopSessionImagePoll();
+    sec.classList.add('hidden'); sec.classList.remove('fade-in-up');
+    if (S.history.length === 0) return;
+    const topics = S.history.slice(0, 3).map(h => h.question).join(', ');
+    if (!setGradioTA('#hidden-session-topics textarea', topics)) return;
+    const baseline = document.querySelector('#hidden-concept-image img')?.src || '';
+    loading.classList.remove('hidden');
+    // Small delay so Gradio registers the topics input before the click
+    setTimeout(() => {
+      if (!clickGradioBtn('#hidden-generate-session-image-btn')) { stopSessionImagePoll(); return; }
+      const started = Date.now();
+      S.imgPoll = setInterval(() => {
+        const el = document.querySelector('#hidden-concept-image img');
+        if (el && el.src && el.src !== baseline) {
+          stopSessionImagePoll();
+          img.src = el.src;
+          sec.classList.remove('hidden');
+          void sec.offsetWidth; // restart fade-in animation
+          sec.classList.add('fade-in-up');
+        } else if (Date.now() - started > 120000) {
+          stopSessionImagePoll(); // give up quietly after 2 min
+        }
+      }, 500);
+    }, 200);
   }
 
   // ── Question display ───────────────────────────────────────────────────────
@@ -533,7 +554,6 @@ BRIDGE_JS = """() => {
     $('empty-state')?.classList.remove('hidden');
     $('question-area')?.classList.add('hidden');
     $('feedback-card')?.classList.add('hidden');
-    hideConceptImage();
   }
 
   // ── MCQ display ────────────────────────────────────────────────────────────
@@ -614,7 +634,6 @@ BRIDGE_JS = """() => {
     if (es) es.classList.add('hidden');
     if (qa) qa.classList.remove('hidden');
     if (eb) eb.classList.remove('hidden');
-    hideConceptImage();
     if (S.mode === 'mcq') {
       S.waitingMCQ = true;
       S.prevMCQ = document.querySelector('#hidden-mcq-output textarea')?.value || '';
@@ -662,6 +681,7 @@ BRIDGE_JS = """() => {
         return '<div class="modal-history-item"><span class="hist-badge '+vc+'">'+(vc==='correct'?'✓':vc==='partial'?'~':'✗')+'</span><span class="hist-q">'+h.question+'</span></div>';
       }).join('');
     }
+    startSessionImage();
     modal.classList.remove('hidden');
   }
 
@@ -685,7 +705,8 @@ BRIDGE_JS = """() => {
         if(ai){ai.value='';} if(cc) cc.textContent='0 chars'; if(sb) sb.disabled=true;
         if(fc) fc.classList.add('hidden'); if(es) es.classList.remove('hidden');
         if(qa) qa.classList.add('hidden'); if(eb) eb.classList.add('hidden');
-        hideConceptImage();
+        stopSessionImagePoll();
+        $('modal-session-image')?.classList.add('hidden');
         if(qc) qc.scrollIntoView({behavior:'smooth',block:'start'});
       }],
     ];
@@ -698,7 +719,7 @@ BRIDGE_JS = """() => {
       if (el && !el._pp) { el._pp = true; el.addEventListener('click', fn); }
     }
     const modal = $('modal');
-    if (modal && !modal._pp) { modal._pp = true; modal.addEventListener('click', e => { if(e.target===modal) modal.classList.add('hidden'); }); }
+    if (modal && !modal._pp) { modal._pp = true; modal.addEventListener('click', e => { if(e.target===modal) { modal.classList.add('hidden'); stopSessionImagePoll(); } }); }
     const ai = $('answer-input'), sb = $('submit-btn'), cc = $('char-count');
     if (ai && !ai._pp) {
       ai._pp = true;
@@ -792,15 +813,6 @@ BRIDGE_JS = """() => {
       }
     }
 
-    // Concept image: Gradio writes the generated image into the hidden
-    // gr.Image — surface it in the custom UI when a new src appears.
-    const conceptEl = document.querySelector('#hidden-concept-image img');
-    if (conceptEl && conceptEl.src && conceptEl.src !== S.lastConceptImg) {
-      S.lastConceptImg = conceptEl.src;
-      // Only show if feedback is still on screen (user hasn't moved on)
-      const fc = $('feedback-card');
-      if (fc && !fc.classList.contains('hidden')) showConceptImage(conceptEl.src);
-    }
   }, 300);
 }"""
 
@@ -838,6 +850,8 @@ with gr.Blocks(title="PaperProf", css=CSS) as demo:
     mcq_trigger      = gr.Textbox(value="0",       label="mcqtrig", elem_id="hidden-mcq-trigger")
     mcq_output       = gr.Textbox(value="",        label="mcqout",  elem_id="hidden-mcq-output")
     language_box     = gr.Textbox(value="English", label="lang", elem_id="hidden-language-box")
+    session_topics   = gr.Textbox(value="",        label="topics",  elem_id="hidden-session-topics")
+    session_img_btn  = gr.Button("gen session image", elem_id="hidden-generate-session-image-btn")
 
     load_btn.click(
         load_pdf,
@@ -855,9 +869,11 @@ with gr.Blocks(title="PaperProf", css=CSS) as demo:
         submit_answer,
         inputs=[question_box, chunk_state, answer_box, correct_state, total_state, language_box],
         outputs=[feedback_box, correct_state, total_state, score_box],
-    ).then(
+    )
+
+    session_img_btn.click(
         generate_image_fn,
-        inputs=[question_box, feedback_box],
+        inputs=[session_topics],
         outputs=[concept_image],
     )
 

ui/index.html

@@ -281,15 +281,22 @@
     .feedback-body .section-content { color: var(--text); }
     .feedback-raw { white-space: pre-wrap; }
 
-    /* ── Concept image card ───────────────────────────────────────────────── */
-    #concept-image-display { text-align: center; }
+    /* ── Session image (modal) ────────────────────────────────────────────── */
+    #modal-session-image {
+      margin-bottom: 24px; padding: 18px;
+      background: rgba(255,255,255,.04);
+      border: 1px solid var(--border);
+      border-radius: var(--r-sm);
+      backdrop-filter: blur(12px);
+      text-align: center;
+    }
     .concept-image-title {
       font-size: .72rem; font-weight: 700; letter-spacing: .1em;
       text-transform: uppercase; color: var(--cyan-l);
       margin-bottom: 14px; text-align: left;
     }
-    #concept-image {
-      width: 100%; max-width: 512px; display: inline-block;
+    #session-image {
+      width: 100%; max-width: 320px; display: inline-block;
       border-radius: var(--r-sm); border: 1px solid var(--border);
       box-shadow: 0 8px 24px rgba(0,0,0,.4);
     }
@@ -551,12 +558,6 @@
       <div class="mcq-explanations hidden" id="mcq-explanations"></div>
     </div>
 
-    <!-- ── Concept image card ────────────────────────────────────────────── -->
-    <div class="card hidden" id="concept-image-display">
-      <div class="concept-image-title">Visual Summary</div>
-      <img id="concept-image" alt="Visual summary of this concept" />
-      <p class="concept-image-caption">Visual summary of this concept</p>
-    </div>
   </div>
 
   <!-- ── Session modal ───────────────────────────────────────────────────── -->
@@ -568,6 +569,14 @@
       <div class="modal-score-label" id="modal-score-label">questions answered</div>
       <p class="modal-message" id="modal-message"></p>
       <div class="modal-history hidden" id="modal-history"></div>
+      <div class="loading-msg hidden" id="modal-image-loading">
+        <span class="spinner"></span> Generating your visual summary…
+      </div>
+      <div class="hidden" id="modal-session-image">
+        <div class="concept-image-title">Visual Summary</div>
+        <img id="session-image" alt="Visual summary of your session" />
+        <p class="concept-image-caption">Visual summary of your session</p>
+      </div>
       <button class="btn-primary" id="modal-close" style="width:100%;justify-content:center">
         Study Again
       </button>