', '
for presentation. Output raw HTML as plain text, without Markdown or code blocks.
* **Directness:** Provide succinct responses without unnecessary prefaces.
* **Accuracy:** Ensure precise translations and context-specific explanations.
* **Context:** Integrate context deeply in translations and explanations.
## Instructions for Different Input Types
The input structure 'Input: "..." Context: "..."' is ONLY used for the *first* user turn. For all subsequent turns, the user input will be plain text.
- **Single Word/Phrase Input (Structured Input: 'Input: "word or phrase" Context: "sentence"'):**
1. Determine the base, dictionary form of the word or phrase. This means using the singular form for nouns (e.g., "cat" instead of "cats") and the infinitive form for verbs (e.g., "run" instead of "ran"). Use this base form consistently in the explanation and title.
2. Address and explain the base form of the word or phrase directly, even if the input is in a conjugated or inflected form. This is especially important for idioms.
3. Provide an explanation ***exclusively in ${userLanguage}***, factoring in context, and explaining any idiomatic usage.
4. Provide an explanation in ${userLanguage}, factoring in context, and explaining any idiomatic usage.
5. Generate a distinct example sentence to highlight word/phrase usage. The **example sentence and its translation should appear first in the original input language, then in ${userLanguage}**.
6. Use the following HTML structure. ***All content (definition, explanation, examples and translations) must be provided solely in ${userLanguage}, regardless of the input language.***
[Base form] ([Part of Speech])
[Definition in ${userLanguage}]
[Contextual explanation in ${userLanguage}]
' tag with bolded "Translation" in ${userLanguage}. 2. **DO NOT treat a sentence input as a single word/phrase explanation.** Do NOT output a block using only a single word/phrase explanation/template for sentence input. 3. **AFTER the full-sentence translation**, identify any interesting, difficult, or idiomatic words/phrases in the sentence that might benefit from explanation. and explain the expressions in ${userLanguage}. 4. For each such word or phrase, provide a concise explanation in ${userLanguage}. 5. **Never output only a single word/phrase explanation template for any sentence input**—sentence translation is always required as the first output, followed by a list of explanations of words/phrases as appropriate. 6. Use the following HTML structure:
[Translated Sentence in ${userLanguage}]
' tag contains the full translation. Never output only a single word/phrase explanation for sentence input; always include the full sentence translation first, and then explanations for multiple relevant expressions if applicable.* - **Plain Text Input (Subsequent Turns):** 1. Respond naturally and directly in ${userLanguage}. 2. Utilize HTML ('
', '
번역가, 통역사
This refers to individuals translating foreign content into their own language, as highlighted by the ESV Bible translators in context.
出迎え
誰かが到着する際に迎えに行くことを意味します。この文脈では、彼女が駅まで私を迎えに来てくれたという意味です。
To achieve, to attain.
This means to successfully reach or accomplish a goal. In context, it suggests the necessity to achieve our objectives.
Etre capable de, être en mesure de.
Cela signifie être capable ou apte à faire quelque chose. Dans ce contexte, cela indique qu'il avait la capacité de résoudre le problème.
彼は困難にもかかわらず同僚たちを説得することに成功した。
Translation:Trotz des Regens sind wir zum Konzert gegangen.
I'm sorry, I do not have access to real-time weather information. You can check a reliable weather app or website for the current conditions in London.
### Example 8: Plain Text Input (User Language: French) **User Input:** "Peux-tu me raconter une blague courte ?" **Assistant Output:**Bien sûr, voici une blague courte :
Pourquoi les poissons vivent-ils dans l'eau salée ? Parce que le poivre les fait éternuer !
## Notes * Prioritize outputting all content in '${userLanguage}' to enhance clarity and learning. * Avoid excessive word explanations in sentences; prioritize challenging parts relevant to context. * Maintain user clarity and effectiveness for learning experiences. `; const ttsInstructions = ` Accent/Affect: Neutral and clear, like a professional voice-over artist. Focus on accuracy. Tone: Objective and methodical. Maintain a slightly formal tone without emotion. Pacing: Use distinct pauses between words and phrases to demonstrate pronunciation nuances. Emphasize syllabic clarity. Pronunciation: Enunciate words with deliberate clarity, focusing on vowel sounds and consonant clusters. `; let chatHistory = []; function updateChatHistoryState(currentHistory, message, role) { return [...currentHistory, { role: role, content: message }]; } function addMessageToUI(message, messageClass, container) { const messageDiv = createElement("div", { className: `chat-message ${messageClass}`, innerHTML: message }); container.appendChild(messageDiv); container.scrollTop = container.scrollHeight; } async function getOpenAIResponse(apiKey, model, history) { try { const api_url = `https://api.openai.com/v1/chat/completions`; const response = await fetch( api_url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }, body: JSON.stringify({ model: model, messages: history, max_tokens: 500, temperature: 0.7, }) } ); if (!response.ok) { const errorData = await response.json(); console.error('OpenAI API error:', errorData); throw new Error(`OpenAI API error: ${response.status} - ${response.statusText}`); } const data = await response.json(); return data.choices[0]?.message?.content || "Sorry, could not get a response."; } catch (error) { console.error('OpenAI API call failed:', error); return "Sorry, something went wrong communicating with OpenAI."; } } async function getGoogleResponse(apiKey, model, history) { try { const formattedMessages = history.map(msg => ({ role: msg.role === 'assistant' ? 'model' : msg.role, parts: [{ text: msg.content }] })); const api_url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`; const response = await fetch( api_url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ system_instruction: {parts: [{text: systemPrompt}]}, contents: formattedMessages, generationConfig: { temperature: 0.7, maxOutputTokens: 500, ...(model.includes("2.5") ? { thinkingConfig: { thinkingBudget: 0 } } : {})} }) } ); if (!response.ok) { const errorData = await response.json(); console.error('Google Gemini API error:', errorData); const message = errorData?.error?.message || `Google Gemini API error: ${response.status} - ${response.statusText}`; throw new Error(message); } const data = await response.json(); return data.candidates[0].content.parts[0].text; } catch (error) { console.error('Google Gemini API call failed:', error); return `Sorry, something went wrong communicating with Google. ${error.message || ''}`; } } async function getBotResponse(provider, apiKey, model, history) { if (provider === 'openai') { return await getOpenAIResponse(apiKey, model, history); } else if (provider === 'google') { return await getGoogleResponse(apiKey, model, history); } } async function handleSendMessage() { const userInput = document.getElementById("user-input") const chatContainer = document.getElementById("chat-container") const message = userInput.value.trim(); if (!message) return; const userMessage = message; userInput.value = ''; addMessageToUI(userMessage, 'user-message', chatContainer); chatHistory = updateChatHistoryState(chatHistory, userMessage, "user"); addMessageToUI("loading ...", 'loading-message', chatContainer); const botResponse = await getBotResponse(llmProvider, llmApiKey, llmModel, chatHistory); chatContainer.removeChild(chatContainer.lastChild); addMessageToUI(botResponse, 'bot-message', chatContainer); chatHistory = updateChatHistoryState(chatHistory, botResponse, "assistant"); } function getSelectedWithContext() { const selectedTextElement = targetSectionHead.querySelector(".reference-word"); const contextElement = (document.querySelector("span.selected-text, span.is-selected") || {}).parentElement || null; const selectedText = selectedTextElement ? selectedTextElement.textContent.trim() : ""; const contextText = contextElement ? contextElement.innerText.trim() : ""; return `Input: "${selectedText}"` + `, Context: "${contextText}"`; } async function updateChatWidget(){ if (!settings.chatWidget) return; const chatWrapper = createElement("div", { id: "chat-widget", style: "margin-top: 5px 0 10px;" }); const chatContainer = createElement("div", { id: "chat-container" }); const inputContainer = createElement("div", { className: "input-container" }); const userInput = createElement("input", { type: "text", id: "user-input", placeholder: "Ask anything" }); const sendButton = createElement("button", { id: "send-button", textContent: "Send" }); inputContainer.appendChild(userInput); inputContainer.appendChild(sendButton); chatWrapper.appendChild(chatContainer); chatWrapper.appendChild(inputContainer); const existingChatWidget = document.getElementById('chat-widget'); if(existingChatWidget) { existingChatWidget.replaceWith(chatWrapper); } else { if (targetSectionHead.matches(".section-widget--head")) { targetSectionHead.appendChild(chatWrapper); } else { targetSectionHead.prepend(chatWrapper); } } changeScrollAmount("#chat-container", 0.2) userInput.addEventListener('keydown', (event) => { if (event.key === 'Enter') { event.preventDefault(); handleSendMessage(); } else if (event.key === 'Escape') { event.preventDefault(); event.target.blur(); } event.stopPropagation(); }, true); sendButton.addEventListener('click', handleSendMessage); if (llmProvider === 'openai') chatHistory = updateChatHistoryState(chatHistory, systemPrompt, "system"); if (settings.askSelected && targetSectionHead.matches(".section-widget--head")) { const initialUserMessage = getSelectedWithContext(); chatHistory = updateChatHistoryState(chatHistory, initialUserMessage, "user"); addMessageToUI("loading ...", 'loading-message', chatContainer); const botResponse = await getBotResponse(llmProvider, llmApiKey, llmModel, chatHistory); chatContainer.removeChild(chatContainer.lastChild); addMessageToUI(botResponse, 'bot-message', chatContainer); chatHistory = updateChatHistoryState(chatHistory, botResponse, "assistant"); } } async function updateTTS() { if (!settings.tts) return; const ttsButton = await waitForElement('.is-tts'); const isWord = document.querySelector("span.selected-text, span.is-selected"); if (!settings.ttsSentence && !isWord) { ttsButton.click(); return; } if (!settings.ttsWord && isWord) { ttsButton.click(); return; } const selectedTextElement = document.querySelector(".reference-word"); const selectedText = selectedTextElement ? selectedTextElement.textContent.trim() : ""; let audioData = await openAITTS(`${selectedText}`, settings.ttsApiKey, settings.ttsVoice, 1.0, ttsInstructions); if (audioData == null) return; const newTtsButton = createElement("button", {id: "playAudio", textContent: "🔊", className: "is-tts"}); newTtsButton.addEventListener('click', async (event) => { await playAudio(audioData, 0.7); }) ttsButton.replaceWith(newTtsButton); playAudio(audioData, 0.7); } await updateChatWidget(); await updateTTS(); const selectedTextElement = targetSectionHead.querySelector(".reference-word"); if (selectedTextElement){ const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type !== 'characterData') return; updateChatWidget(); updateTTS(); }); }); observer.observe(selectedTextElement, {subtree: true, characterData: true}); } } const userDictionaryLang = await getDictionaryLanguage(); const DictionaryLocalePairs = await getDictionaryLocalePairs() const userLanguage = DictionaryLocalePairs[userDictionaryLang]; const lessonReader = document.getElementById('lesson-reader'); const observer = new MutationObserver((mutations) => { if (!settings.chatWidget) return; mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { if (node.nodeType !== Node.ELEMENT_NODE) return; if (node.matches(".widget-area")) { updateWidget(); } }); }); }); observer.observe(lessonReader, {childList: true}); } async function setupCourse() { function createCourseUI(){ const resetButton = createElement("button", { id: "resetLessonPositions", textContent: "⏮️", title: "Reset all lessons to the first page", className: "nav-button" }); let nav = document.querySelector(".library-section > .list-header > .list-header-index"); nav.appendChild(resetButton); } function setupCourseStyles() { const css = ` .nav-button { background: none; border: none; cursor: pointer; font-size: 1.5rem; } .library-section > .list-header > .list-header-index { grid-template-columns: auto 1fr auto !important; } .dynamic--word-progress { grid-template-columns: repeat(3, auto) !important; } .word-indicator--box-white { background-color: rgb(255 255 255 / 85%); border-color: rgb(255 255 255); } `; const styleElement = createElement("style", { textContent: css }); document.querySelector("head").appendChild(styleElement); } function enrichLessonDetails() { function addKnownWordsIndicator(lessonElement, lessonInfo) { const dynamicWordProgress = lessonElement.querySelector('.dynamic--word-progress'); const knownWordPercentage = Math.round((lessonInfo.knownWordsCount / lessonInfo.uniqueWordsCount) * 100); const knownWordsItem = createElement('div', {className: 'word-indicator--item grid-layout grid-align--center grid-item is-fluid--left', title: 'Known Words'}); const knownWordsBox = createElement('div', {className: 'word-indicator--box word-indicator--box-white'}); knownWordsItem.appendChild(knownWordsBox); const textWrapper = createElement('span', {className: 'text-wrapper is-size-8'}); textWrapper.appendChild(createElement('span', {textContent: `${lessonInfo.knownWordsCount} (${knownWordPercentage}%)`})); knownWordsItem.appendChild(textWrapper); dynamicWordProgress.appendChild(knownWordsItem); } async function updateWordIndicatorPercentages(lessonElement, lessonId) { console.log(`lessonId: ${lessonId}`); const lessonInfo = await getLessonInfo(lessonId); const wordIndicatorItems = lessonElement.querySelector(".word-indicator--item"); if (!wordIndicatorItems) { return; } const lingqsPercentage = Math.round((lessonInfo.cardsCount / lessonInfo.uniqueWordsCount) * 100); const lingqsElement = lessonElement.querySelector('.word-indicator--item[title="LingQs"] > span > span'); lingqsElement.textContent = `${lessonInfo.cardsCount} (${lingqsPercentage}%)`; addKnownWordsIndicator(lessonElement, lessonInfo); } const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { mutation.addedNodes.forEach((node) => { if (node.matches('.library-item-wrap')) { const lessonId = node.id.split("--")[1].split("-")[0]; updateWordIndicatorPercentages(node, lessonId); } }); } }); }); const targetNode = document.querySelector('.library-section .library-list'); console.log(targetNode); const config = { childList: true, subtree: true }; observer.observe(targetNode, config); } function enableCourseSorting() { const dropdownItems = document.querySelectorAll('.library-section > .list-header .tw-dropdown--item'); if (dropdownItems.length) { // Setup library sort event listener dropdownItems.forEach((item, index) => { item.addEventListener('click', () => { console.log(`Clicked sort option: ${index}`); storage.set('librarySortOption', index); settings.librarySortOption = index; }); }); // Change sort by the setting dropdownItems[settings.librarySortOption].click(); return true; } else { console.warn("Dropdown items not found for library sort."); return false; } } function setupLessonResetButton() { const resetButton = document.getElementById("resetLessonPositions"); resetButton.addEventListener("click", async () => { const languageCode = await getLanguageCode(); const collectionId = await getCollectionId(); const allLessons = await getAllLessons(languageCode, collectionId); const confirmed = confirm(`Reset all ${allLessons.length} lessons to their starting positions?`); if (!confirmed) { return; } for (const lesson of allLessons) { await setLessonProgress(lesson.id, 0); console.log(`Reset lesson ID: ${lesson.id} to the first page`); } alert(`Successfully reset ${allLessons.length} lessons to their starting positions.`); }); } const libraryHeader = await waitForElement('.library-section > .list-header'); createCourseUI(); setupCourseStyles(); enrichLessonDetails(); enableCourseSorting(); setupLessonResetButton(); } function fixBugs() { const resizeToast = () => { const css = ` .toasts { height: fit-content; } `; const cssElement = createElement("style", {textContent: css}); document.querySelector("head").appendChild(cssElement); } resizeToast(); } function init() { fixBugs(); if (document.URL.includes("reader")) { createUI(); applyStyles(settings.styleType, settings.colorMode); setupKeyboardShortcuts(); setupYoutubePlayerCustomization(); changeScrollAmount(".reader-container", 0.3); setupSentenceFocus(); setupLLMs(); } if (document.URL.includes("library")) { setupCourse(); } } init(); })();