Feat: Automatically ask AI to regenerate the card's back (translation, explanation, example, image) when the vocabulary word on the front is changed

index.html

@@ -51,7 +51,7 @@
 </head>
 <body class="dark-theme in-chat-view">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.1.96</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.1.97</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/views/learn/learn-view.js

@@ -291,11 +291,96 @@ export class LearnView {
     };
   }
 
-  updateCardFront(cardId, deckId, newFront) {
+  async updateCardFront(cardId, deckId, newFront) {
     if (!newFront || newFront.trim() === '') return;
-    const res = db.exec("SELECT back FROM flashcards WHERE id = ?", [cardId]);
+    const res = db.exec("SELECT front, back FROM flashcards WHERE id = ?", [cardId]);
     if (res && res.length > 0) {
+      const oldFront = res[0].front;
+      if (oldFront.trim() === newFront.trim()) return;
+      
+      // Front has changed, update it
       db.editFlashcard(cardId, newFront.trim(), res[0].back);
+      this.renderDeckDetails(deckId);
+      
+      // Show loading overlay on the back of the card
+      const previewModal = document.getElementById('preview-modal-overlay');
+      if (previewModal) {
+        const backEl = previewModal.querySelector('.flashcard-back');
+        if (backEl) {
+           const loader = document.createElement('div');
+           loader.id = 'ai-regenerate-loader';
+           loader.style = 'position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(10,10,12,0.85); display: flex; flex-direction: column; align-items:center; justify-content:center; z-index: 10; color: var(--primary); font-weight: 500; font-size: 14px; backdrop-filter: blur(4px);';
+           loader.innerHTML = `
+             <style>@keyframes pulseAI { 0% { opacity:0.5; transform: scale(0.9); } 50% { opacity:1; transform: scale(1.1); } 100% { opacity:0.5; transform: scale(0.9); } }</style>
+             <div style="margin-bottom: 12px; font-size: 24px; animation: pulseAI 1.5s infinite;">✨</div>
+             <div>KI generiert neue Karte...</div>
+           `;
+           backEl.appendChild(loader);
+           
+           // Flip the card automatically so the user sees the generation
+           const inner = previewModal.querySelector('.flashcard-inner');
+           if (inner && !inner.classList.contains('flipped')) {
+               inner.classList.add('flipped');
+           }
+        }
+      }
+      
+      try {
+        const prompt = `Du bist ein KI-Tutor. Generiere die Rückseite für eine Vokabelkarte.
+Wort: "${newFront.trim()}"
+Gib AUSSCHLIESSLICH ein valides JSON-Objekt zurück, ohne Markdown-Formatierung wie \`\`\`json. Format:
+{
+  "translation": "Die kurze Übersetzung",
+  "explanation": "Eine kurze Erklärung (1-2 Sätze, zwingend in der Zielsprache der Vokabel)",
+  "example": "Ein spezifischer, anspruchsvoller Beispielsatz (zwingend in der Zielsprache)",
+  "search_query": "Ein simpler englischer Suchbegriff für ein passendes Bild"
+}`;
+        
+        const aiResponse = await aiRouter.sendMessage(prompt, { history: [] });
+        let jsonStr = aiResponse;
+        if (jsonStr.includes('\`\`\`json')) {
+           jsonStr = jsonStr.split('\`\`\`json')[1].split('\`\`\`')[0];
+        } else if (jsonStr.includes('\`\`\`')) {
+           jsonStr = jsonStr.split('\`\`\`')[1].split('\`\`\`')[0];
+        }
+        
+        const data = JSON.parse(jsonStr.trim());
+        const newBack = `${data.translation}\n\n**Erklärung:** ${data.explanation}\n\n**Beispiel:** ${data.example}`;
+        
+        let newImageUrl = null;
+        if (data.search_query) {
+           const encodedQuery = encodeURIComponent(data.search_query + ' single photo, clear focus, high quality');
+           newImageUrl = `https://tse1.mm.bing.net/th?q=${encodedQuery}&w=800&h=1000&c=7&rs=1`;
+        }
+        
+        db.editFlashcard(cardId, newFront.trim(), newBack);
+        if (newImageUrl) {
+           db.exec("UPDATE flashcards SET image_url = ? WHERE id = ?", [newImageUrl, cardId]);
+        }
+        
+        this.renderDeckDetails(deckId);
+        
+        const currentModal = document.getElementById('preview-modal-overlay');
+        if (currentModal) {
+            const updatedRes = db.exec("SELECT * FROM flashcards WHERE id = ?", [cardId]);
+            if (updatedRes && updatedRes.length > 0) {
+                currentModal.remove();
+                this.previewCard(updatedRes[0], deckId);
+                // Ensure it stays flipped to show the result
+                setTimeout(() => {
+                   const newInner = document.querySelector('#preview-modal-overlay .flashcard-inner');
+                   if (newInner) newInner.classList.add('flipped');
+                }, 50);
+            }
+        }
+      } catch (e) {
+        console.error("Failed to regenerate card:", e);
+        const currentModal = document.getElementById('preview-modal-overlay');
+        if (currentModal) {
+           const loader = currentModal.querySelector('#ai-regenerate-loader');
+           if (loader) loader.remove();
+        }
+      }
     }
   }