Add autodetect language button

document-authoring.js

@@ -7,6 +7,7 @@ app.innerHTML = `
         <span class="spinner"></span> Translation services starting...
       </div>
       <div id="translationControls">
+        <button id="detectLanguageButton" style="margin-right: 10px;">Detect Language</button>
         <select id="sourceLanguageSelect">
           <option value="English" selected>English</option>
           <option value="Spanish">Spanish</option>
@@ -15,8 +16,7 @@ app.innerHTML = `
         </select>
         <span style="margin: 0 10px;">→</span>
         <select id="targetLanguageSelect">
-          <option value="English">English</option>
-          <option value="Spanish">Spanish</option>
+          <option value="Spanish" selected>Spanish</option>
           <option value="French">French</option>
           <option value="German">German</option>
         </select>
@@ -204,21 +204,36 @@ script.onload = async () => {
     }
   }
 
-  // Add translation button handler
-  const translateButton = document.getElementById('translateButton');
+  // Add language selection handlers
   const sourceLanguageSelect = document.getElementById('sourceLanguageSelect');
   const targetLanguageSelect = document.getElementById('targetLanguageSelect');
-  
+
+  // Update target language options when source language changes
+  sourceLanguageSelect.addEventListener('change', () => {
+    const selectedSource = sourceLanguageSelect.value;
+    const languages = ['English', 'Spanish', 'French', 'German'];
+    
+    // Clear existing options
+    targetLanguageSelect.innerHTML = '';
+    
+    // Add all languages except the selected source language
+    languages.forEach(lang => {
+      if (lang !== selectedSource) {
+        const option = document.createElement('option');
+        option.value = lang;
+        option.textContent = lang;
+        targetLanguageSelect.appendChild(option);
+      }
+    });
+  });
+
+  // Update translate button handler (removed validation)
+  const translateButton = document.getElementById('translateButton');
   translateButton.addEventListener('click', async () => {
     try {
       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...';
 
@@ -233,4 +248,88 @@ script.onload = async () => {
       translateButton.innerHTML = 'Translate Document';
     }
   });
+
+  // Add language detection function
+  async function detectLanguage(text) {
+    try {
+      const response = await fetch('/client/api/v1/chat/completions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          messages: [
+            {
+              role: "system",
+              content: `You are a language detection expert. Analyze the following text and determine if it's English, Spanish, French, or German.
+
+Key indicators:
+- French: Uses accents like é, è, ê, à, ç. Common words: je, suis, le, la, les, et, dans
+- Spanish: Uses ñ, á, é, í, ó, ú. Common words: el, la, los, las, es, en, y, que
+- German: Uses ä, ö, ü, ß. Common words: der, die, das, und, ist, in, ich
+- English: Generally no accents. Common words: the, is, are, and, in, of, to
+
+Respond with ONLY ONE of these exact options: "English", "Spanish", "French", or "German". Do not add any other text.`
+            },
+            {
+              role: "user",
+              content: text
+            }
+          ],
+          model: "gemma-2b",
+          stream: false
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error('Language detection failed');
+      }
+
+      const data = await response.json();
+      const detectedLanguage = data.choices[0].message.content.trim();
+      
+      // Validate the response is one of our supported languages
+      const supportedLanguages = ['English', 'Spanish', 'French', 'German'];
+      if (!supportedLanguages.includes(detectedLanguage)) {
+        throw new Error('Invalid language detection response');
+      }
+      
+      return detectedLanguage;
+    } catch (error) {
+      console.error("Language detection error:", error);
+      throw new Error("Failed to detect language");
+    }
+  }
+
+  // Add detect language button handler
+  const detectLanguageButton = document.getElementById('detectLanguageButton');
+  detectLanguageButton.addEventListener('click', async () => {
+    try {
+      detectLanguageButton.disabled = true;
+      detectLanguageButton.innerHTML = '<span class="spinner"></span> Detecting...';
+      
+      // Get document content
+      const jsonDoc = await editor.currentDocument().saveDocument();
+      const textRuns = flattenTextRuns(jsonDoc.container.document);
+      
+      // Get a sample of text (first 1000 characters)
+      const sampleText = textRuns
+        .map(run => run.text)
+        .join(' ')
+        .slice(0, 1000);
+      
+      // Detect language
+      const detectedLanguage = await detectLanguage(sampleText);
+      
+      // Update source language dropdown
+      const sourceLanguageSelect = document.getElementById('sourceLanguageSelect');
+      sourceLanguageSelect.value = detectedLanguage;
+      
+    } catch (error) {
+      alert('Language detection failed: ' + error.message);
+    } finally {
+      detectLanguageButton.disabled = false;
+      detectLanguageButton.innerHTML = 'Detect Language';
+    }
+  });
 };