' (for paragraphs of text like definitions and explanations), '
' tag. - Use '
' tags sparingly and only for intentional line breaks within a block element. Avoid using '
' for paragraph spacing; use new '' tags instead. - Output *raw HTML as plain text*. This means your entire response should be a string of HTML. Do not use Markdown syntax (e.g., '# H1', '**Bold**', '*Italic*', '> blockquote', '---'), do not wrap your HTML in Markdown code blocks (e.g., \`\`\`html ... \`\`\`), and do not use any other formatting conventions like XML declarations. ## Utmost Directness & Conciseness: - Provide responses that are concise and directly address the user's query. Get straight to the point. - Avoid unnecessary prefaces, introductory phrases (e.g., "Certainly, I can help with that!", "Here is the information you requested:", "You want to know about..."), apologies, or conversational filler. - Do not include self-referential statements (e.g., "As a language model, I...", "I will now provide..."). - Do not ask clarifying questions back to the user; assume the provided input is sufficient and proceed with the task. ## Unwavering Accuracy & Precision: - Ensure all translations are precise, natural-sounding in '${userLanguage}', and reflect intended nuances from the original. - Definitions must be accurate, dictionary-like, and specifically tailored to the word's usage in the given context. - Explanations should be clear, correct, and contextually relevant. - Grammar, spelling, and punctuation in '${userLanguage}' must be impeccable. ## Deep Contextual Integration: - Thoroughly analyze the provided 'Context' sentence or situation to understand the specific meaning and usage of the input word or phrase. - Your explanation must clearly articulate how the context influences the meaning, especially for words with multiple senses or for idiomatic expressions. - Do not provide generic definitions if the context narrows the meaning. `; const wordPhrasePrompt = ` Use this prompt only for the right next input. # Single Word/Phrase Input ## Instructions Input will be given as: 'Input: "word or phrase" Context: "sentence including the word or phrase"' 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"). For phrases, use the standard dictionary form. 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. 2. Provide the IPA pronunciation for the base form of the word or phrase. The IPA should be enclosed in square brackets (e.g., [prəˌnʌnsiˈeɪʃən]). 3. Provide a concise dictionary definition of the word/phrase as it is used within the given context in ${userLanguage}. This definition should be very brief, akin to a quick lookup in a dictionary (e.g., for a verb: '달리다', '성취하다'; for a noun: '사과', '번역가'), typically just a few words or a short phrase, **not a full explanatory sentence**. 4. Explain the contextual meaning of the word/phrase with more details in ${userLanguage}. 5. Generate a penetrating example sentence in ${lessonLanguage} to highlight word/phrase usage. The example sentence should first appear in ${lessonLanguage}, then its translation in ${userLanguage}. 6. Use the following HTML structure (Part of Speech, definition, explanation, and translation of example sentence in ${userLanguage}; base form, and original example sentence in ${lessonLanguage} or as appropriate): \`\`\` [Base form in ${lessonLanguage}] /[IPA Pronunciation]/ ([Part of Speech in ${userLanguage}])
[Brief dictionary definition of the word/phrase used in the context, in ${userLanguage}]
[Contextual explanation in ${userLanguage}]
번역가
이것은 주어진 문맥에서 ESV 성경 번역가들이 강조한 것처럼, 외국 콘텐츠를 모국어로 번역하는 개인을 지칭합니다.
To achieve, to attain.
This means to successfully reach or accomplish a goal. In context, it suggests the necessity to achieve our objectives.
Être 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.
' tag.
2. After the translated sentences and an '
' separator, provide a compact and non-verbose explanation of the overall meaning of the input sentences in ${userLanguage}. This explanation should:
- Clarify the main message or purpose of the sentences.
- Highlight any important contextual details that affect understanding.
- Explain any subtle nuances, implications, or underlying tones.
- Briefly touch upon significant grammatical structures or word choices if they are key to understanding the sentence's construction or meaning (but do not turn this into a full grammar lesson).
- This explanation should be enclosed in one or more '
' tags as needed for clarity, aims to provide a holistic understanding that can not be achieved by the translation only. 3. After another '
[The entire translated sentences in ${userLanguage}]
[Comprehensive explanation in ${userLanguage} as per instruction #2. This may use multiple paragraphs.]
彼は困難にもかかわらず同僚たちを説得することに成功した。
この文は、彼が直面したであろう障害や困難な状況があったにもかかわらず、最終的に同僚たちを自分の意見や提案に同意させることに成功したという事実を伝えています。「malgré les difficultés」という部分が、その成功が容易ではなかったことを示唆しています。
Trotz des Regens sind wir zum Konzert gegangen.
Dieser Satz drückt aus, dass die Sprecher das Konzert besucht haben, obwohl es geregnet hat. Das Wort "Nonostante" (Trotz) leitet einen Nebensatz ein, der einen Gegensatz oder ein Hindernis zum Hauptgeschehen darstellt. Es unterstreicht die Entschlossenheit der Sprecher oder ihr großes Interesse am Konzert, das sie auch schlechtes Wetter nicht davon abgehalten hat hinzugehen.
걱정 마세요, 그렇게 어려운 일이 아니니까 금방 이해하게 될 거예요.
이 문장은 상대방을 안심시키려는 의도로 사용됩니다. "it's not rocket science"라는 관용적 표현은 어떤 것이 생각보다 복잡하거나 어렵지 않다는 것을 강조하며, 따라서 상대방이 해당 과제나 문제를 빠르게 파악하고 해결할 수 있을 것이라는 격려의 메시지를 전달합니다.
Le soleil brillait fort. Les oiseaux chantaient dans les arbres.
Ces deux phrases décrivent une scène matinale ou diurne paisible et agréable. La première phrase établit une condition météorologique claire et lumineuse. La seconde ajoute un élément auditif qui renforce l'atmosphère de tranquillité et de nature. Ensemble, elles peignent une image vivante d'un environnement serein.
', '
or Markdown for presentation.
- If a user's plain text query refers to a word, phrase, concept, or asks a question that seems related to the initial structured input (the one with "Input:" and/or "Context:"), you MUST assume they are referring back to that specific initial input and its context, even if they don't explicitly state "in the previous context," "about the word we just discussed," or similar phrases. Use your knowledge of that initial input to provide a relevant and contextual answer in ${userLanguage}.
- For general queries clearly not related to the initial input, answer as a general language assistant in ${userLanguage}.
## Examples
### Example 1: Plain Text Input (User Language: English) - General Query
User Input: "What's the weather like in London today?"
Assistant Output:
\`\`\`
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 2: Plain Text Input (User Language: Korean) - Referential Query
(Scenario: The initial input was for the word "translators" with its context from the ESV Bible example, and user language is Korean. The bot has already provided the structured \`wordPhrasePrompt\` output.)
User Input (in plain text mode, following the structured output for "translators"): "그 단어가 문맥에서 정확히 어떤 의미로 사용되었나요?"
Assistant Output (implicitly referring to "translators" and its initial context):
\`\`\`
앞서 논의된 문맥에서 '번역가들(translators)'이라는 단어는 ESV 성경 번역가들이 특정 단어를 '종(servant)'으로 번역하기로 선택한 상황을 가리킵니다. 이는 그들이 특정 해석을 선호하여 해당 여성이 공식적인 권위의 직책을 가졌을 가능성을 배제했음을 시사합니다. 따라서 문맥상 '번역가들'은 단순히 언어를 옮기는 사람을 넘어, 특정 신학적 또는 해석적 관점을 가진 번역 주체를 의미할 수 있습니다.
\`\`\`
Respond understood if you got it.
`;
let chatHistory = [];
updateReferenceWord();
updateChatWidget();
stopPlayingAudio(audioContext);
updateTTS(true);
const selectedTextElement = document.querySelector(".reference-word");
if (selectedTextElement){
const observer = new MutationObserver((mutations) => {
if (isProgrammaticReferenceWordUpdate) return;
mutations.forEach(async (mutation) => {
if (mutation.type !== 'characterData') return;
console.debug('Observer:', `Widget changed from word/sentence. ${mutation.type}, ${mutation.attributeName}`);
updateReferenceWord();
updateChatWidget();
stopPlayingAudio(audioContext);
updateTTS(false);
});
});
observer.observe(selectedTextElement, {subtree: true, characterData: true});
}
const widgetArea = document.querySelector("#lesson-reader .widget-area");
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach(async(node) => {
if (node.nodeType !== Node.ELEMENT_NODE) return;
if (!node.matches(".reader-widget")) return;
console.debug('Observer:', `Widget changed from resource. ${mutation.type}, ${mutation.addedNodes}`);
updateReferenceWord();
updateChatWidget();
stopPlayingAudio(audioContext);
updateTTS(true);
});
});
});
observer.observe(widgetArea, {childList: true});
}
const userDictionaryLang = await getDictionaryLanguage();
const DictionaryLocalePairs = await getDictionaryLocalePairs()
const lessonLanguage = DictionaryLocalePairs[getLessonLanguage()];
const userLanguage = DictionaryLocalePairs[userDictionaryLang];
const lessonReader = document.getElementById('lesson-reader');
updateWidget();
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType !== Node.ELEMENT_NODE) return;
if (!(node.matches(".widget-area") && node.parentNode)) return;
console.debug('Observer:', `Widget added. ${mutation.type}`, mutation.addedNodes);
updateWidget();
});
});
});
observer.observe(lessonReader, {childList: true});
}
function fixBugs() {
function resizeToast() {
const css = `
.toasts {
height: fit-content;
}
`;
applyCSS(css);
}
resizeToast();
}
function simplifyYoutubeEmbeddedPlayer() {
const css = `
.ytp-pause-overlay-container{
display: none !important;
}
.ytp-watermark{
display: none !important;
}
.ytp-paid-content-overlay{
display: none !important;
}
.caption-window {
display: unset !important;
}
`;
applyCSS(css);
}
function init() {
fixBugs();
if (document.URL.includes("/reader")) {
setupReader();
setupKeyboardShortcuts();
setupYoutubePlayerCustomization();
setupReaderContainer();
setupLLMs();
} else if (document.URL.includes("/library")) {
setupCourse();
} else if (document.URL.includes("youtube")) {
simplifyYoutubeEmbeddedPlayer();
}
}
init();
})();