Update index.html

index.html

@@ -37,6 +37,14 @@
         .btn-secondary:hover {
             background-color: #d1d5db;
         }
+        .btn-success {
+            background-color: #10b981;
+            color: white;
+            transition: background-color 0.2s;
+        }
+        .btn-success:hover {
+            background-color: #059669;
+        }
         /* Style for the Content Editable Editor */
         #textEditor {
             border: 1px solid #ccc;
@@ -95,6 +103,35 @@
             color: white;
             border-bottom: 2px solid #4f46e5;
         }
+        /* Flashcard style */
+        .flashcard {
+            background-color: #f3f4f6;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 1px solid #e5e7eb;
+        }
+        .flashcard:hover {
+            background-color: #e5e7eb;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+        }
+        .flashcard-term {
+            font-weight: 600;
+            color: #4f46e5;
+            text-decoration: underline;
+        }
+        .flashcard-definition {
+            font-size: 0.9em;
+            color: #4b5563;
+        }
+        .flashcard-example {
+            font-style: italic;
+            font-size: 0.8em;
+            color: #6b7280;
+            margin-top: 5px;
+        }
         /* Loading Style (Spinner) */
         .spinner {
             border: 4px solid rgba(0, 0, 0, 0.1);
@@ -130,6 +167,12 @@
                  class="w-full p-4 focus:ring-indigo-500 focus:border-indigo-500 text-gray-800"></div>
                  
             <p class="text-sm text-right text-gray-500 mt-2">Characters: <span id="charCount">0</span>/5000</p>
+
+            <div class="mt-4 border-t pt-4">
+                <button id="createCardButton" onclick="createFlashcardFromSelection()" class="btn-success px-4 py-2 rounded-lg font-medium disabled:opacity-50" disabled>
+                    + Create Flashcard from Selection
+                </button>
+            </div>
         </div>
 
         <div class="card mb-6">
@@ -178,6 +221,15 @@
                 </div>
             </div>
         </div>
+
+        <!-- New Flashcards Panel -->
+        <div id="flashcardsPanel" class="card">
+            <h2 class="text-xl font-semibold mb-4 text-gray-700">Your Flashcards (Study Session)</h2>
+            <div id="flashcardList" class="space-y-3">
+                <p id="noCardsMessage" class="text-gray-500 italic">No flashcards created yet. Select a word and click 'Create Flashcard'.</p>
+            </div>
+        </div>
+
     </div>
     
     <!-- Translation and Context Modal -->
@@ -216,7 +268,7 @@
 
     <script>
         // Global variables
-        const textEditor = document.getElementById('textEditor'); // Renamed from textInput
+        const textEditor = document.getElementById('textEditor'); 
         const playButton = document.getElementById('playButton');
         const audioPlayer = document.getElementById('audioPlayer');
         const charCount = document.getElementById('charCount');
@@ -224,6 +276,9 @@
         const playText = document.getElementById('playText');
         const loopSelectionButton = document.getElementById('loopSelectionButton');
         const clearLoopButton = document.getElementById('clearLoopButton');
+        const createCardButton = document.getElementById('createCardButton');
+        const flashcardList = document.getElementById('flashcardList');
+        const noCardsMessage = document.getElementById('noCardsMessage');
         const speedSelector = document.getElementById('speedSelector');
         
         const MAX_CHARS = 5000;
@@ -234,7 +289,6 @@
         // --- Interface and Editor Management ---
 
         function getEditorText() {
-            // Get text content, not HTML, to ensure clean input for TTS and AI
             return textEditor.innerText.trim();
         }
 
@@ -263,14 +317,6 @@
         textEditor.addEventListener('input', () => {
             const currentLength = getEditorText().length;
             charCount.textContent = currentLength;
-            
-            // Limit input to max characters
-            if (currentLength > MAX_CHARS) {
-                // Warning: This truncation is crude for contenteditable, user must manually delete
-                // Since this is study tool, we rely on the user to manage content length.
-                // Truncation logic is best left for the server, but we warn here.
-            }
-            // Enable button if there is text
             playButton.disabled = currentLength === 0;
         });
 
@@ -281,6 +327,13 @@
             audioPlayer.playbackRate = parseFloat(speedSelector.value);
         });
 
+        // Enable Loop and Card button if there is a selection
+        textEditor.addEventListener('mouseup', () => {
+            const selection = window.getSelection().toString().trim();
+            loopSelectionButton.disabled = !selection;
+            createCardButton.disabled = !selection;
+        });
+
         // --- Main Audio and Loop Functionality ---
 
         async function fetchAudio(text) {
@@ -300,10 +353,8 @@
                     throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
                 }
 
-                // The backend returns an audio blob (MP3)
                 const audioBlob = await response.blob();
                 
-                // Revoke previous URL to free up memory
                 if (lastAudioUrl) URL.revokeObjectURL(lastAudioUrl);
                 
                 lastAudioUrl = URL.createObjectURL(audioBlob);
@@ -330,7 +381,6 @@
             }
         }
 
-        // Sets the selection for repetition (Phrase Loop)
         function setLoopMode() {
             const selection = window.getSelection().toString().trim();
             if (selection) {
@@ -350,7 +400,6 @@
             clearLoopButton.disabled = true;
             audioPlayer.loop = false;
             audioPlayer.title = '';
-            // Return to main audio (if available)
             if (getEditorText()) {
                 handlePlay();
             }
@@ -358,71 +407,68 @@
 
         audioPlayer.addEventListener('ended', () => {
             if (isLooping) {
-                // If in loop mode, restart playback
                 audioPlayer.currentTime = 0;
                 audioPlayer.play();
             }
         });
         
-        // Enable Loop button if there is a selection
-        textEditor.addEventListener('mouseup', () => {
-            const selection = window.getSelection().toString().trim();
-            loopSelectionButton.disabled = !selection;
-        });
-
-
         // --- Quick Translation Functionality (Double Click) ---
         
-        // Activate the AI API call for translation
-        async function fetchExplanationAndTranslation(word, context) {
-            const explanationSpinner = document.getElementById('explanationSpinner');
-            const translationSpinner = document.getElementById('translationSpinner');
-            const explanationText = document.getElementById('explanationText');
-            const translationText = document.getElementById('translationText');
-
-            explanationText.textContent = '';
-            translationText.textContent = '';
-            explanationSpinner.classList.remove('hidden');
-            translationSpinner.classList.remove('hidden');
+        async function fetchExplanationAndTranslation(word, context, isFlashcard=false) {
+            const spinner = isFlashcard ? document.getElementById('cardSpinner') : document.getElementById('explanationSpinner');
+            const explanationText = isFlashcard ? null : document.getElementById('explanationText');
+            const translationText = isFlashcard ? null : document.getElementById('translationText');
+            
+            if (!isFlashcard) {
+                explanationText.textContent = '';
+                translationText.textContent = '';
+            }
+            spinner.classList.remove('hidden');
 
             try {
-                // Route for the backend using Gemini for explanation/translation
                 const response = await fetch('/explain-proxy', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    // Sends the clicked word and context to the AI
-                    body: JSON.stringify({ word: word, context: context })
+                    body: JSON.stringify({ word: word, context: context, for_flashcard: isFlashcard })
                 });
 
                 if (!response.ok) {
-                    throw new Error(`HTTP Error: ${response.status}. Check if GEMINI_API_KEY is configured in your Space.`);
+                    const errorMsg = `HTTP Error: ${response.status}. Check if GEMINI_API_KEY is configured in your Space.`;
+                    throw new Error(errorMsg);
                 }
                 
                 const data = await response.json();
                 
-                // Assumes the backend returns an object { explanation: "...", translation: "..." }
-                explanationText.textContent = data.explanation || 'Could not retrieve explanation.';
-                translationText.textContent = data.translation || 'Could not retrieve translation.';
+                if (isFlashcard) {
+                    return data; // Return full data for flashcard creation
+                } else {
+                    explanationText.textContent = data.explanation || 'Could not retrieve explanation.';
+                    translationText.textContent = data.translation || 'Could not retrieve translation.';
+                }
+                return data;
 
             } catch (error) {
                 console.error('Error fetching context from AI:', error);
-                explanationText.textContent = 'Error connecting to AI. Check if GEMINI_API_KEY is configured correctly.';
-                translationText.textContent = 'Error connecting to AI.';
+                const msg = 'Error connecting to AI. Check if GEMINI_API_KEY is configured correctly.';
+                if (!isFlashcard) {
+                    explanationText.textContent = msg;
+                    translationText.textContent = msg;
+                } else {
+                    alert(msg);
+                }
+                return null;
             } finally {
-                explanationSpinner.classList.add('hidden');
-                translationSpinner.classList.add('hidden');
+                spinner.classList.add('hidden');
             }
         }
 
         // Logic to open the Modal on double click
         textEditor.addEventListener('dblclick', (event) => {
-            // Check if the click occurred on a text node or an element inside the editor
             const selectedWord = window.getSelection().toString().trim().replace(/[^a-zA-Z']/g, '');
 
             if (selectedWord) {
                 const fullText = getEditorText();
                 const index = fullText.indexOf(selectedWord);
-                // Capture context (a few words before and after)
                 const context = fullText.substring(Math.max(0, index - 50), index + selectedWord.length + 50);
 
                 document.getElementById('wordSelected').textContent = selectedWord;
@@ -433,6 +479,57 @@
             }
         });
 
+        // --- Flashcard Creation Functionality ---
+        
+        async function createFlashcardFromSelection() {
+            const selectedText = window.getSelection().toString().trim();
+            if (!selectedText) {
+                return;
+            }
+            
+            const fullText = getEditorText();
+            const index = fullText.indexOf(selectedText);
+            const context = fullText.substring(Math.max(0, index - 50), index + selectedText.length + 50);
+
+            createCardButton.disabled = true;
+            createCardButton.innerHTML = `<div class="spinner mr-2"></div> Creating Card...`;
+
+            try {
+                 // Fetch the structured data for the flashcard
+                 const cardData = await fetchExplanationAndTranslation(selectedText, context, true);
+                 
+                 if (cardData && cardData.term && cardData.translation && cardData.example) {
+                    renderFlashcard(cardData);
+                 } else {
+                     alert("The AI could not generate the structured card data. Please try another word or check the API key.");
+                 }
+
+            } finally {
+                createCardButton.disabled = false;
+                createCardButton.innerHTML = `+ Create Flashcard from Selection`;
+            }
+        }
+        
+        function renderFlashcard(data) {
+            noCardsMessage.classList.add('hidden');
+            
+            const cardElement = document.createElement('div');
+            cardElement.className = 'flashcard';
+            
+            // Front (Term and Translation)
+            cardElement.innerHTML = `
+                <div class="flashcard-front">
+                    <p class="flashcard-term">${data.term.toUpperCase()}</p>
+                    <p class="flashcard-definition">PT: ${data.translation}</p>
+                    <p class="flashcard-example">Example: ${data.example}</p>
+                </div>
+                <!-- Back side (Definition) can be toggled via JS if needed -->
+            `;
+
+            flashcardList.prepend(cardElement); // Add new cards to the top
+        }
+
+
         // --- Modal Control ---
 
         const modal = document.getElementById('explanationModal');
@@ -441,7 +538,6 @@
 
         function openModal() {
             modal.style.display = 'block';
-            // Ensure Explanation tab is the first one shown
             showTab('explanation');
         }