working nicely

app.py

@@ -92,9 +92,14 @@ def generate_flashcard():
                 return jsonify({'error': 'JSON parsing error in language mode: ' + str(parse_err)})
         elif mode == 'flashcard':
             try:
-                # Expecting a JSON array, each element having "question" and "answer"
-                flashcards = json.loads(content)
-                return jsonify({'flashcards': flashcards})
+                # Extract the JSON array substring from the content in case there is extra text.
+                json_match = re.search(r'\[[\s\S]*\]', content)
+                if json_match:
+                    json_text = json_match.group(0)
+                    flashcards = json.loads(json_text)
+                    return jsonify({'flashcards': flashcards})
+                else:
+                    raise ValueError("No JSON array found in response")
             except Exception as parse_err:
                 return jsonify({'error': 'JSON parsing error in flashcard mode: ' + str(parse_err)})
         elif mode == 'explain':

static/js/prompts.js

@@ -14,8 +14,8 @@ Example output:
   }
 ]
 
-Now generate flashcards for this text:
-Please output only the JSON array with no additional text or commentary.`;
+Please output only the JSON array with no additional text or commentary.
+Now generate flashcards for the text below:`;
 
 const EXPLAIN_PROMPT = `Explain the following text in simple terms, focusing on the main concepts and their relationships. Use clear and concise language, and break down complex ideas into easily understandable parts. If there are any technical terms, provide brief explanations for them. Return your explanation in a JSON object with an "explanation" key.
 
@@ -56,4 +56,18 @@ Example output for malformed input:
 Now explain the word in the phrase below:
 Word: "{word}"
 Phrase: "{phrase}"
-Please output only the JSON object without any additional text or commentary.`; 
+Please output only the JSON object without any additional text or commentary.`; 
+
+/*
+Example input for multiple words:
+Word: "better suited for the region than some of the more traditional ones embraced by agribusiness."
+Phrase: "change and better suited for the region than some of"
+
+Example output:
+{
+  "word": "better suited for the region than some of the more traditional ones embraced by agribusiness.",
+  "translation": "thích hợp hơn cho khu vực hơn là một số trong số những phương pháp truyền thống được chấp nhận bởi ngành nông nghiệp",
+  "question": "The proposal is <b>better suited for the region than some of the more traditional ones embraced by agribusiness</b>.",
+  "answer": "It means that the proposal fits the local context better compared to older, conventional methods."
+}
+*/

templates/index.html

@@ -560,7 +560,8 @@
                     flashcardElement.remove();
                     updateExportButtonVisibility();
                 });
-                flashcardsContainer.appendChild(flashcardElement);
+                // Prepend new flashcard to the container to show it at the top
+                flashcardsContainer.insertBefore(flashcardElement, flashcardsContainer.firstChild);
             });
             updateExportButtonVisibility();
         }
@@ -573,15 +574,16 @@
             flashcardElement.dataset.translation = flashcard.translation;
             flashcardElement.dataset.answer = flashcard.answer;
             flashcardElement.innerHTML = `
-                <div style="font-size: 1.2em; margin-bottom: 10px;"><b>${flashcard.word}</b>: ${flashcard.translation}</div>
-                <div>- ${flashcard.answer}</div>
-                <button class="remove-btn">Remove</button>
-            `;
+                    <div style="font-size: 1.2em; margin-bottom: 10px;"><b>${flashcard.word}</b>: ${flashcard.translation}</div>
+                    <div>- ${flashcard.answer}</div>
+                    <button class="remove-btn">Remove</button>
+                `;
             flashcardElement.querySelector('.remove-btn').addEventListener('click', function () {
                 flashcardElement.remove();
                 updateExportButtonVisibility();
             });
-            flashcardsContainer.appendChild(flashcardElement);
+            // Prepend new language flashcard at the top of the container
+            flashcardsContainer.insertBefore(flashcardElement, flashcardsContainer.firstChild);
             updateExportButtonVisibility();
         }