prompt

requirements.txt

@@ -1,3 +1,4 @@
 flask_cors
 flask
 anthropic
+python-dotenv

static/js/prompts.js

@@ -14,7 +14,8 @@ Example output:
   }
 ]
 
-Now generate flashcards for this text:`;
+Now generate flashcards for this text:
+Please output only the JSON array with no additional text or commentary.`;
 
 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.
 
@@ -23,7 +24,8 @@ Example output:
   "explanation": "Load balancing is a technique in parallel computing that ensures work is distributed evenly across different processing units. Think of it like distributing tasks among team members - when done well, everyone has a fair amount of work and the team is more efficient. There are two main approaches: dynamic balancing (adjusting work distribution as needed) and static balancing (planning the distribution ahead of time)."
 }
 
-Now explain this text:`;
+Now explain this text:
+Please output only the JSON object with no additional text or commentary.`;
 
 const LANGUAGE_PROMPT = `Return a JSON object with "word", "translation", "question", and "answer" keys for the given word in {targetLanguage}.
 
@@ -39,6 +41,19 @@ Example output:
   "answer": "Declined to accept or comply with a request or proposal."
 }
 
+Sometimes the input may be malformed or incomplete:
+Word: "@foreignminister"
+Phrase: ""
+
+Example output for malformed input:
+{
+  "word": "foreign minister",
+  "translation": "bộ trưởng ngoại giao",
+  "question": "The <b>foreign minister</b> announced new trade agreements with neighboring countries.",
+  "answer": "The government minister responsible for a country's foreign policy and relations."
+}
+
 Now explain the word in the phrase below:
 Word: "{word}"
-Phrase: "{phrase}"`; 
+Phrase: "{phrase}"
+Please output only the JSON object without any additional text or commentary.`; 

templates/index.html

@@ -847,11 +847,9 @@
                 systemPrompt.style.display = mode === 'flashcard' ? 'block' : 'none';
                 document.getElementById('explain-prompt').style.display = mode === 'explain' ? 'block' : 'none';
                 document.getElementById('language-prompt').style.display = mode === 'language' ? 'block' : 'none';
-                submitBtn.style.display = mode === 'language' ? 'none' : 'block';
-
-                // The settings panel will not auto–open now. Users must open it manually via the settings icon.
-
-                // Update the collection button text and export button visibility as before
+                submitBtn.style.display = 'block';
+                
+                // Update the collection button text and export button visibility
                 updateAddToCollectionButtonText();
                 updateExportButtonVisibility();
             });
@@ -867,9 +865,8 @@
                 saveLanguageChoice(targetLanguage);
                 // Ensure the Language mode button remains selected
                 document.querySelector('.mode-btn[data-mode="language"]').classList.add('selected');
-                // Keep language buttons visible and Generate button hidden
-                document.getElementById('language-buttons').style.display = 'flex';
-                submitBtn.style.display = 'none';
+                // Keep language buttons visible and Generate button visible
+                submitBtn.style.display = 'block';
                 // Set the mode to 'language'
                 mode = 'language';
             });
@@ -945,12 +942,12 @@
             return {
                 element: highlight,
                 pageNumber: parseInt(pageDiv.dataset.pageNumber),
-                rect: {
+                rects: [{
                     left: rect.left - pageBounds.left,
                     top: rect.top - pageBounds.top,
                     width: rect.width,
                     height: rect.height
-                }
+                }]
             };
         }
 
@@ -1036,7 +1033,37 @@
             }
         }
 
-        submitBtn.addEventListener('click', generateContent);
+        submitBtn.addEventListener('click', function() {
+            if (mode === 'language') {
+                const selection = window.getSelection();
+                if (selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    const selectedText = selection.toString().trim();
+                    
+                    if (selectedText !== '') {
+                        let selectedLanguageButton = document.querySelector('#language-buttons .mode-btn.selected');
+                        if (!selectedLanguageButton) {
+                            // Fallback: use the default language from localStorage
+                            const defaultLanguage = loadLanguageChoice();
+                            setLanguageButton(defaultLanguage);
+                            selectedLanguageButton = document.querySelector('#language-buttons .mode-btn.selected');
+                        }
+                        if (selectedLanguageButton) {
+                            const targetLanguage = selectedLanguageButton.dataset.language;
+                            const phrase = getPhrase(range, selectedText);
+                            generateLanguageFlashcard(selectedText, phrase, targetLanguage);
+                            speakWord(selectedText);
+                        }
+                    } else {
+                        alert('Please select some text first');
+                    }
+                } else {
+                    alert('Please select some text first');
+                }
+            } else {
+                generateContent();
+            }
+        });
 
         apiKeyInput.addEventListener('change', function () {
             apiKey = this.value;
@@ -1284,7 +1311,7 @@
             mode = 'language';
             document.querySelector('.mode-btn[data-mode="language"]').classList.add('selected');
             document.getElementById('language-buttons').style.display = 'flex';
-            document.getElementById('submit-btn').style.display = 'none';
+            document.getElementById('submit-btn').style.display = 'block';
             systemPrompt.style.display = 'none';
             document.getElementById('explain-prompt').style.display = 'none';
             document.getElementById('language-prompt').style.display = 'block';