Add translation pairs

document-authoring.js

@@ -7,7 +7,15 @@ app.innerHTML = `
         <span class="spinner"></span> Translation services starting...
       </div>
       <div id="translationControls">
-        <select id="languageSelect">
+        <select id="sourceLanguageSelect">
+          <option value="English" selected>English</option>
+          <option value="Spanish">Spanish</option>
+          <option value="French">French</option>
+          <option value="German">German</option>
+        </select>
+        <span style="margin: 0 10px;">→</span>
+        <select id="targetLanguageSelect">
+          <option value="English">English</option>
           <option value="Spanish">Spanish</option>
           <option value="French">French</option>
           <option value="German">German</option>
@@ -120,7 +128,7 @@ script.onload = async () => {
     return groups;
   }
 
-  async function translate(content, lang) {
+  async function translate(content, targetLang, sourceLang = 'English') {
     try {
       const response = await fetch('/client/api/v1/chat/completions', {
         method: 'POST',
@@ -131,7 +139,7 @@ script.onload = async () => {
           messages: [
             {
               role: "system",
-              content: `Translate the following text to ${lang}. Each segment is marked with ||| delimiters. Translate each segment independently while preserving original capitalization and punctuation. Add spaces at the start or end of segments only if they exist in the original text.`
+              content: `Translate the following text from ${sourceLang} to ${targetLang}. Each segment is marked with ||| delimiters. Translate each segment independently while preserving original capitalization and punctuation. Add spaces at the start or end of segments only if they exist in the original text.`
             },
             {
               role: "user",
@@ -165,27 +173,21 @@ script.onload = async () => {
   }
 
   // Enhanced recursive translation function
-  async function translateRecursive(docJson, lang) {
+  async function translateRecursive(docJson, targetLang, sourceLang = 'English') {
     const textRuns = flattenTextRuns(docJson);
     const groups = groupAdjacentRuns(textRuns);
     
     for (let group of groups) {
-      // Prepare content for translation, preserving spaces
       const content = group.map(run => `|||${run.text}|||`).join('\n');
+      const translatedContent = await translate(content, targetLang, sourceLang);
       
-      // Get translations
-      const translatedContent = await translate(content, lang);
-      
-      // Parse translations
       const translations = translatedContent
         .split('|||')
         .filter(t => t.trim())
         .map(t => t.trim());
       
-      // Update document
       group.forEach((run, index) => {
         if (translations[index]) {
-          // Preserve original leading/trailing spaces
           const originalText = run.text;
           let translatedText = translations[index];
           
@@ -204,16 +206,24 @@ script.onload = async () => {
 
   // Add translation button handler
   const translateButton = document.getElementById('translateButton');
-  const languageSelect = document.getElementById('languageSelect');
+  const sourceLanguageSelect = document.getElementById('sourceLanguageSelect');
+  const targetLanguageSelect = document.getElementById('targetLanguageSelect');
   
   translateButton.addEventListener('click', async () => {
     try {
-      const selectedLanguage = languageSelect.value;
+      const sourceLanguage = sourceLanguageSelect.value;
+      const targetLanguage = targetLanguageSelect.value;
+
+      if (sourceLanguage === targetLanguage) {
+        alert('Please select different languages for source and target');
+        return;
+      }
+
       translateButton.disabled = true;
       translateButton.innerHTML = '<span class="spinner"></span> Translating...';
 
       const jsonDoc = await editor.currentDocument().saveDocument();
-      await translateRecursive(jsonDoc.container.document, selectedLanguage);
+      await translateRecursive(jsonDoc.container.document, targetLanguage, sourceLanguage);
       const translatedDoc = await docAuthSystem.loadDocument(jsonDoc);
       editor.setCurrentDocument(translatedDoc);
     } catch (error) {