working

app.py

@@ -5,6 +5,7 @@ import json
 from datetime import datetime
 import base64
 from llm_utils import generate_completion
+import re
 
 app = Flask(__name__)
 
@@ -68,18 +69,24 @@ def generate_flashcard():
     data = request.json
     prompt = data['prompt']
     mode = data.get('mode', 'flashcard')
+    model = data.get('model')
 
     try:
-        # Use llm_utils to generate completion
-        content = generate_completion(prompt)
+        # Use llm_utils to generate completion with the selected model
+        content = generate_completion(prompt, model=model)
         print(prompt)
         print(content)
 
         if mode == 'language':
             try:
-                # Expecting a JSON object with "word", "translation", "question", "answer"
-                flashcard = json.loads(content)
-                return jsonify({'flashcard': flashcard})
+                # Extract the JSON 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)
+                    flashcard = json.loads(json_text)
+                    return jsonify({'flashcard': flashcard})
+                else:
+                    raise ValueError("No JSON object found in response")
             except Exception as parse_err:
                 return jsonify({'error': 'JSON parsing error in language mode: ' + str(parse_err)})
         elif mode == 'flashcard':

llm_utils.py

@@ -6,33 +6,45 @@ def load_model_config():
     with open('models.yaml', 'r') as file:
         return yaml.safe_load(file)
 
-def generate_completion(prompt: str, api_key: str = None) -> str:
+def generate_completion(prompt: str, model: str = None, api_key: str = None) -> str:
     """
-    Generate completion using LiteLLM with the configured model
+    Generate completion using LiteLLM with the configured model.
     
     Args:
-        prompt (str): The input prompt
-        api_key (str, optional): Override API key. If not provided, will use environment variable
+        prompt (str): The input prompt.
+        model (str, optional): The model to use (if not provided, default is used).
+        api_key (str, optional): Override API key. If not provided, will use environment variable.
         
     Returns:
-        str: The generated completion text
+        str: The generated completion text.
     """
     config = load_model_config()
-    
-    # Get the first environment variable and its models
-    first_env_var = list(config['models'][0].keys())[0]
-    model_name = config['models'][0][first_env_var][0]
-    
-    # If no API key provided, get from environment
+
+    # Build a mapping of model to the required API key environment variable.
+    model_to_env = {}
+    for item in config['models']:
+        for env_key, models in item.items():
+            for m in models:
+                model_to_env[m] = env_key
+
+    # Use the default model from the first configuration if none provided.
+    if model is None:
+        first_env_var = list(config['models'][0].keys())[0]
+        model = config['models'][0][first_env_var][0]
+
+    env_var = model_to_env.get(model)
+    if not env_var:
+        raise ValueError("Model is not supported.")
+
     if api_key is None:
-        api_key = os.getenv(first_env_var)
-        if not api_key:
-            raise ValueError(f"Please set {first_env_var} environment variable")
+        api_key = os.getenv(env_var)
+    if not api_key:
+        raise ValueError(f"Please set {env_var} environment variable")
     
     messages = [{"role": "user", "content": prompt}]
     
     response = completion(
-        model=model_name,
+        model=model,
         messages=messages,
         api_key=api_key
     )

static/js/main.js

@@ -1,222 +0,0 @@
-import { PROMPTS } from './prompts.js';
-
-// DOM elements
-const fileInput = document.getElementById('file-input');
-const pdfViewer = document.getElementById('pdf-viewer');
-const epubViewer = document.getElementById('epub-viewer');
-const modeToggle = document.getElementById('mode-toggle');
-const systemPrompt = document.getElementById('system-prompt');
-const explainPrompt = document.getElementById('explain-prompt');
-const languagePrompt = document.getElementById('language-prompt');
-const submitBtn = document.getElementById('submit-btn');
-const flashcardsContainer = document.getElementById('flashcards');
-const apiKeyInput = document.getElementById('api-key-input');
-const modelSelect = document.getElementById('model-select');
-const recentPdfList = document.getElementById('file-list');
-
-// State variables
-let pdfDoc = null;
-let pageNum = 1;
-let pageRendering = false;
-let pageNumPending = null;
-let scale = 3;
-const minScale = 0.5;
-const maxScale = 5;
-let mode = 'flashcard';
-let apiKey = '';
-let currentFileName = '';
-let currentPage = 1;
-let selectedModel = 'claude-3-haiku-20240307';
-let lastProcessedQuery = '';
-let lastRequestTime = 0;
-const cooldownTime = 1000; // 1 second cooldown
-let book;
-let rendition;
-let currentScaleEPUB = 100;
-let highlights = [];
-let flashcardCollectionCount = 0;
-let languageCollectionCount = 0;
-let collectedFlashcards = [];
-let collectedLanguageFlashcards = [];
-let voices = [];
-
-// Initialize on DOM load
-document.addEventListener('DOMContentLoaded', () => {
-    // Set default prompts
-    systemPrompt.value = PROMPTS.flashcard;
-    explainPrompt.value = PROMPTS.explain;
-    languagePrompt.value = PROMPTS.language;
-
-    // Load last working API key
-    const lastWorkingAPIKey = localStorage.getItem('lastWorkingAPIKey');
-    if (lastWorkingAPIKey) {
-        apiKeyInput.value = lastWorkingAPIKey;
-        apiKey = lastWorkingAPIKey;
-    }
-
-    // Initialize collection counts and flashcards
-    flashcardCollectionCount = parseInt(localStorage.getItem('flashcardCollectionCount')) || 0;
-    languageCollectionCount = parseInt(localStorage.getItem('languageCollectionCount')) || 0;
-    collectedFlashcards = JSON.parse(localStorage.getItem('collectedFlashcards')) || [];
-    collectedLanguageFlashcards = JSON.parse(localStorage.getItem('collectedLanguageFlashcards')) || [];
-    updateAddToCollectionButtonText();
-    updateExportButtonVisibility();
-
-    // Load recent files
-    loadRecentFiles();
-
-    // Set up event listeners
-    setupEventListeners();
-    populateVoiceList();
-    initializeMode();
-});
-
-// Setup event listeners
-function setupEventListeners() {
-    fileInput.addEventListener('change', handleFileChange);
-    apiKeyInput.addEventListener('change', () => {
-        apiKey = apiKeyInput.value;
-        localStorage.setItem('lastWorkingAPIKey', apiKey);
-    });
-    modelSelect.addEventListener('change', () => {
-        selectedModel = modelSelect.value;
-    });
-    submitBtn.addEventListener('click', generateContent);
-    document.getElementById('add-to-collection-btn').addEventListener('click', addToCollection);
-    document.getElementById('clear-collection-btn').addEventListener('click', clearCollection);
-    document.getElementById('export-csv-btn').addEventListener('click', exportToCSV);
-    document.getElementById('go-to-page-btn').addEventListener('click', handleGoToPage);
-    document.getElementById('page-input').addEventListener('keyup', (e) => {
-        if (e.key === 'Enter') handleGoToPage();
-    });
-    document.getElementById('zoom-in-btn').addEventListener('click', handleZoomIn);
-    document.getElementById('zoom-out-btn').addEventListener('click', handleZoomOut);
-    document.getElementById('settings-icon').addEventListener('click', () => {
-        const settingsPanel = document.getElementById('settings-panel');
-        settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'block' : 'none';
-    });
-    document.getElementById('left-panel').addEventListener('scroll', handleScroll);
-    setupModeButtons();
-    setupLanguageButtons();
-}
-
-// Initialize mode
-function initializeMode() {
-    mode = 'language';
-    document.querySelector('.mode-btn[data-mode="language"]').classList.add('selected');
-    document.getElementById('language-buttons').style.display = 'flex';
-    submitBtn.style.display = 'none';
-    systemPrompt.style.display = 'none';
-    explainPrompt.style.display = 'none';
-    languagePrompt.style.display = 'block';
-    const savedLanguage = loadLanguageChoice() || 'English';
-    setLanguageButton(savedLanguage);
-}
-
-// File handling
-function handleFileChange(e) {
-    const file = e.target.files[0];
-    if (!['application/pdf', 'text/plain', 'application/epub+zip'].includes(file.type)) {
-        console.error('Error: Not a PDF, TXT, or EPUB file');
-        return;
-    }
-    uploadFile(file);
-}
-
-function uploadFile(file) {
-    const formData = new FormData();
-    formData.append('file', file);
-    fetch('/upload_file', {
-        method: 'POST',
-        body: formData
-    })
-        .then(response => response.json())
-        .then(data => {
-            if (data.message) {
-                loadFile(file);
-                loadRecentFiles();
-                addRecentFile(file.name);
-            } else {
-                console.error(data.error);
-            }
-        })
-        .catch(error => console.error('Error:', error));
-}
-
-function loadFile(file) {
-    pdfViewer.style.display = 'none';
-    epubViewer.style.display = 'none';
-    if (file.name.endsWith('.pdf')) {
-        pdfViewer.style.display = 'block';
-        loadPDF(file);
-    } else if (file.name.endsWith('.txt')) {
-        pdfViewer.style.display = 'block';
-        loadTXT(file);
-    } else if (file.name.endsWith('.epub')) {
-        epubViewer.style.display = 'block';
-        loadEPUB(file);
-    }
-}
-
-// PDF handling (broken down for readability)
-async function loadPDF(file) {
-    const arrayBuffer = await readFileAsArrayBuffer(file);
-    pdfDoc = await pdfjsLib.getDocument(arrayBuffer).promise;
-    pdfViewer.innerHTML = '';
-    currentFileName = file.name;
-    const lastPage = localStorage.getItem(`lastPage_${currentFileName}`);
-    pageNum = lastPage ? Math.max(parseInt(lastPage) - 2, 1) : 1;
-    loadScaleForCurrentFile();
-    renderPage(pageNum);
-    updateCurrentPage(pageNum);
-    hideHeaderPanel();
-    loadHighlights();
-}
-
-function readFileAsArrayBuffer(file) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(new Uint8Array(reader.result));
-        reader.onerror = reject;
-        reader.readAsArrayBuffer(file);
-    });
-}
-
-function renderPage(num) {
-    pageRendering = true;
-    pdfDoc.getPage(num).then(page => {
-        const viewport = page.getViewport({ scale });
-        const pixelRatio = window.devicePixelRatio || 1;
-        const adjustedViewport = page.getViewport({ scale: scale * pixelRatio });
-        const pageDiv = createPageDiv(num, viewport);
-        const canvas = createCanvas(viewport, adjustedViewport);
-        renderCanvas(page, canvas, adjustedViewport);
-        pageDiv.appendChild(canvas);
-        const textLayerDiv = createTextLayerDiv(viewport);
-        pageDiv.appendChild(textLayerDiv);
-        renderTextLayer(page, textLayerDiv, viewport);
-        pdfViewer.appendChild(pageDiv);
-        attachLanguageModeListener(pageDiv);
-        renderHighlights();
-        pageRendering = false;
-        if (pageNumPending !== null) {
-            renderPage(pageNumPending);
-            pageNumPending = null;
-        }
-        if (num < pdfDoc.numPages && pdfViewer.scrollHeight <= window.innerHeight * 2) {
-            renderPage(num + 1);
-        }
-    });
-}
-
-// Other functions (TXT, EPUB, navigation, mode handling, flashcard generation, etc.)
-// These are implemented as in index.html, with improvements:
-// - Use async/await consistently
-// - Break down large functions (e.g., generateContent, handleLanguageMode)
-// - Improve error handling
-// - Use const/let appropriately
-// - Encapsulate related functionality
-
-// Note: Due to space constraints, the full implementation is not shown here.
-// However, all functions from index.html are moved here with the noted improvements.
-// Ensure all functionality (PDF, EPUB, TXT handling, navigation, collections, etc.) is preserved.

static/js/models.js

@@ -0,0 +1,14 @@
+const MODEL_API_KEY_MAPPING = {
+  "gemini/gemini-exp-1206": "GEMINI_API_KEY",
+//   "gemini/gemini-2.0-flash": "GEMINI_API_KEY",
+//   "gemini/gemini-2.0-flash-lite-preview-02-05": "GEMINI_API_KEY",
+//   "gemini/gemini-2.0-pro-exp-02-05": "GEMINI_API_KEY",
+//   "gemini/gemini-2.0-flash-thinking-exp-01-21": "GEMINI_API_KEY",
+  "openrouter/google/gemini-exp-1206:free": "OPENROUTER_API_KEY",
+  "openrouter/anthropic/claude-3-haiku-20240307": "OPENROUTER_API_KEY",
+  "openrouter/anthropic/claude-3-sonnet-20240229": "OPENROUTER_API_KEY"
+};
+
+const availableModels = Object.keys(MODEL_API_KEY_MAPPING);
+
+// Removed MODEL_LABELS as they are no longer needed. 

static/js/prompts.js

@@ -0,0 +1,44 @@
+const FLASHCARD_PROMPT = `Generate flashcards as a JSON array where each object has "question" and "answer" keys. The number of flashcards should be proportional to the text's length and complexity, with a minimum of 1 and a maximum of 10. Each question should test a key concept and the answer should be brief but complete. Use <b> tags to emphasize important words or phrases. Cite short code or examples if needed.
+
+Example input: "In parallel computing, load balancing refers to the practice of distributing computational work evenly across multiple processing units. This is crucial for maximizing efficiency and minimizing idle time. Dynamic load balancing adjusts the distribution of work during runtime, while static load balancing determines the distribution before execution begins."
+
+Example output:
+[
+  {
+    "question": "What is the primary goal of <b>load balancing</b> in parallel computing?",
+    "answer": "To <b>distribute work evenly</b> across processing units, maximizing efficiency and minimizing idle time."
+  },
+  {
+    "question": "How does <b>dynamic load balancing</b> differ from <b>static load balancing</b>?",
+    "answer": "Dynamic balancing <b>adjusts work distribution during runtime</b>, while static balancing <b>determines distribution before execution</b>."
+  }
+]
+
+Now generate flashcards for this text:`;
+
+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.
+
+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:`;
+
+const LANGUAGE_PROMPT = `Return a JSON object with "word", "translation", "question", and "answer" keys for the given word in {targetLanguage}.
+
+Example input:
+Word: "refused"
+Phrase: "Hamas refused to join a new round of peace negotiations."
+
+Example output:
+{
+  "word": "refused",
+  "translation": "từ chối",
+  "question": "Hamas <b>refused</b> to join a new round of peace negotiations.",
+  "answer": "Declined to accept or comply with a request or proposal."
+}
+
+Now explain the word in the phrase below:
+Word: "{word}"
+Phrase: "{phrase}"`; 

templates/index.html

@@ -9,6 +9,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
     <link rel="stylesheet" href="/static/css/styles.css">
+    <script src="/static/js/prompts.js"></script>
+    <script src="/static/js/models.js"></script>
     <style>
         .api-settings {
             margin-bottom: 15px;
@@ -70,53 +72,11 @@
             </div>
         </div>
         <div id="settings-panel" style="display: none;">
-            <input type="password" id="api-key-input" placeholder="Enter Claude API Key">
-            <select id="model-select">
-                <option value="claude-3-5-sonnet-20240620">Claude 3.5 Sonnet</option>
-                <option value="claude-3-haiku-20240307">Claude 3 Haiku</option>
-            </select>
-            <textarea id="system-prompt" placeholder="Enter system prompt for flashcard generation">Generate flashcards as a JSON array where each object has "question" and "answer" keys. The number of flashcards should be proportional to the text's length and complexity, with a minimum of 1 and a maximum of 10. Each question should test a key concept and the answer should be brief but complete. Use <b> tags to emphasize important words or phrases. Cite short code or examples if needed.
-
-Example input: "In parallel computing, load balancing refers to the practice of distributing computational work evenly across multiple processing units. This is crucial for maximizing efficiency and minimizing idle time. Dynamic load balancing adjusts the distribution of work during runtime, while static load balancing determines the distribution before execution begins."
-
-Example output:
-[
-  {
-    "question": "What is the primary goal of <b>load balancing</b> in parallel computing?",
-    "answer": "To <b>distribute work evenly</b> across processing units, maximizing efficiency and minimizing idle time."
-  },
-  {
-    "question": "How does <b>dynamic load balancing</b> differ from <b>static load balancing</b>?",
-    "answer": "Dynamic balancing <b>adjusts work distribution during runtime</b>, while static balancing <b>determines distribution before execution</b>."
-  }
-]
-
-Now generate flashcards for this text:</textarea>
-            <textarea id="explain-prompt" placeholder="Enter system prompt for explanation" style="display: none;">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.
-
-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:</textarea>
-            <textarea id="language-prompt" placeholder="Enter system prompt for language mode">Return a JSON object with "word", "translation", "question", and "answer" keys for the given word in {targetLanguage}.
-
-Example input:
-Word: "refused"
-Phrase: "Hamas refused to join a new round of peace negotiations."
-
-Example output:
-{
-  "word": "refused",
-  "translation": "từ chối",
-  "question": "Hamas <b>refused</b> to join a new round of peace negotiations.",
-  "answer": "Declined to accept or comply with a request or proposal."
-}
-
-Now explain the word in the phrase below:
-Word: "{word}"
-Phrase: "{phrase}"</textarea>
+            <input type="password" id="api-key-input" placeholder="Enter API Key">
+            <select id="model-select"></select>
+            <textarea id="system-prompt" placeholder="Enter system prompt for flashcard generation"></textarea>
+            <textarea id="explain-prompt" placeholder="Enter system prompt for explanation" style="display: none;"></textarea>
+            <textarea id="language-prompt" placeholder="Enter system prompt for language mode"></textarea>
         </div>
         <div id="mode-toggle">
             <button class="mode-btn selected" data-mode="flashcard">Flashcard</button>
@@ -149,7 +109,6 @@ Phrase: "{phrase}"</textarea>
         </div>
     </div>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
     <script>
         pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.worker.min.js';
 
@@ -174,7 +133,7 @@ Phrase: "{phrase}"</textarea>
         let apiKey = '';
         let currentFileName = '';
         let currentPage = 1;
-        let selectedModel = 'claude-3-haiku-20240307';
+        let selectedModel = 'gemini/gemini-exp-1206';
         let lastProcessedQuery = '';
         let lastRequestTime = 0;
         const cooldownTime = 1000; // 1 second cooldown
@@ -480,9 +439,30 @@ Phrase: "{phrase}"</textarea>
             }
         }
 
+        async function callLLMAPI(prompt) {
+            const response = await fetch('/generate_flashcard', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': apiKey
+                },
+                body: JSON.stringify({
+                    prompt: prompt,
+                    model: selectedModel,
+                    mode: mode
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            return await response.json();
+        }
+
         async function generateLanguageFlashcard(word, phrase, targetLanguage) {
             if (!apiKey) {
-                alert('Please enter your Claude API key first.');
+                alert('Please enter your API key first.');
                 return;
             }
 
@@ -492,7 +472,7 @@ Phrase: "{phrase}"</textarea>
                 .replace('{targetLanguage}', targetLanguage);
 
             try {
-                const response = await callClaudeAPI(prompt);
+                const response = await callLLMAPI(prompt);
                 if (response.flashcard) {
                     const flashcard = response.flashcard;
                     const formattedFlashcard = {
@@ -507,14 +487,14 @@ Phrase: "{phrase}"</textarea>
                     throw new Error('Invalid response from API');
                 }
             } catch (error) {
-                console.error('Error calling Claude API:', error);
+                console.error('Error calling LLM API:', error);
                 alert('Failed to generate language flashcard. Please check your API key and try again.');
             }
         }
 
         async function generateContent() {
             if (!apiKey) {
-                alert('Please enter your Claude API key first.');
+                alert('Please enter your API key first.');
                 return;
             }
 
@@ -532,23 +512,23 @@ Phrase: "{phrase}"</textarea>
                     return;
                 }
 
-                // Disable the button, change its color, and show notification
+                // Disable the button and show notification
                 submitBtn.disabled = true;
-                submitBtn.style.backgroundColor = '#808080'; // Change to gray
+                submitBtn.style.backgroundColor = '#808080';
                 const notification = document.createElement('div');
                 notification.textContent = 'Generating...';
                 notification.style.position = 'fixed';
                 notification.style.top = '20px';
                 notification.style.right = '20px';
                 notification.style.padding = '10px';
-                notification.style.backgroundColor = 'rgba(0, 128, 0, 0.7)'; // Change to green
+                notification.style.backgroundColor = 'rgba(0, 128, 0, 0.7)';
                 notification.style.color = 'white';
                 notification.style.borderRadius = '5px';
                 notification.style.zIndex = '1000';
                 document.body.appendChild(notification);
 
                 try {
-                    const response = await callClaudeAPI(prompt);
+                    const response = await callLLMAPI(prompt);
                     if (mode === 'flashcard' && response.flashcards) {
                         displayFlashcards(response.flashcards, true);
                     } else if (mode === 'explain' && response.explanation) {
@@ -557,18 +537,17 @@ Phrase: "{phrase}"</textarea>
                         throw new Error('Invalid response from API');
                     }
                 } catch (error) {
-                    console.error('Error calling Claude API:', error);
+                    console.error('Error calling LLM API:', error);
                     alert(`Failed to generate ${mode === 'flashcard' ? 'flashcards' : 'explanation'}. Please check your API key and try again.`);
                 } finally {
-                    // Remove notification, re-enable button, and restore its color after 3 seconds
                     setTimeout(() => {
                         document.body.removeChild(notification);
                         submitBtn.disabled = false;
-                        submitBtn.style.backgroundColor = ''; // Restore original color
+                        submitBtn.style.backgroundColor = '';
                     }, 3000);
                 }
             } else {
-                alert(`Please select some text from the PDF to generate ${mode === 'flashcard' ? 'flashcards' : 'an explanation'}.`);
+                alert(`Please select some text to generate ${mode === 'flashcard' ? 'flashcards' : 'an explanation'}.`);
             }
         }
 
@@ -609,31 +588,6 @@ Phrase: "{phrase}"</textarea>
             }
         }
 
-        async function callClaudeAPI(prompt) {
-            const response = await fetch('/generate_flashcard', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-API-Key': apiKey
-                },
-                body: JSON.stringify({
-                    prompt: prompt,
-                    model: selectedModel,
-                    mode: mode // Add the current mode to the request
-                })
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-
-            return await response.json();
-        }
-
-        modelSelect.addEventListener('change', function () {
-            selectedModel = this.value;
-        });
-
         function displayFlashcards(flashcards, append = false) {
             if (!append) {
                 flashcardsContainer.innerHTML = ''; // Clear existing flashcards only if not appending
@@ -1391,6 +1345,43 @@ Phrase: "{phrase}"</textarea>
                     console.error('Error:', error);
                 });
         }
+
+        document.addEventListener("DOMContentLoaded", () => {
+            // Ensure the variables are defined from /static/js/prompts.js
+            if (typeof FLASHCARD_PROMPT !== 'undefined') {
+                document.getElementById('system-prompt').value = FLASHCARD_PROMPT;
+            }
+            if (typeof EXPLAIN_PROMPT !== 'undefined') {
+                document.getElementById('explain-prompt').value = EXPLAIN_PROMPT;
+            }
+            if (typeof LANGUAGE_PROMPT !== 'undefined') {
+                document.getElementById('language-prompt').value = LANGUAGE_PROMPT;
+            }
+
+            // Populate the model select options
+            const modelSelect = document.getElementById('model-select');
+            availableModels.forEach(model => {
+                const option = document.createElement('option');
+                option.value = model;
+                option.textContent = model;
+                modelSelect.appendChild(option);
+            });
+
+            // Set default model to Gemini
+            modelSelect.value = "gemini/gemini-exp-1206";
+            selectedModel = "gemini/gemini-exp-1206";
+
+            // Update API key placeholder based on selected model
+            modelSelect.addEventListener('change', function() {
+                selectedModel = this.value;
+                const requiredKey = MODEL_API_KEY_MAPPING[selectedModel];
+                apiKeyInput.placeholder = `Enter ${requiredKey}`;
+            });
+
+            // Set initial API key placeholder
+            const initialKey = MODEL_API_KEY_MAPPING["gemini/gemini-exp-1206"];
+            apiKeyInput.placeholder = `Enter ${initialKey}`;
+        });
     </script>
 </body>