File size: 8,036 Bytes
443ca56 54fb2f1 841e389 54fb2f1 841e389 443ca56 54fb2f1 110d39e 54fb2f1 443ca56 54fb2f1 bf7a078 7f4d6ac 54fb2f1 443ca56 54fb2f1 443ca56 54fb2f1 f742657 54fb2f1 f742657 443ca56 54fb2f1 bf7a078 54fb2f1 c49ad44 54fb2f1 c49ad44 54fb2f1 443ca56 54fb2f1 443ca56 54fb2f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 |
// Wait for the DOM to be fully loaded before attaching event handlers
window.onload = function() {
console.log('Window fully loaded, initializing translation app');
// Get form elements using direct form access instead of getElementById
const textTranslationForm = document.querySelector('#text-translation-form');
const docTranslationForm = document.querySelector('#doc-translation-form');
// Set up text translation form
if (textTranslationForm) {
console.log('Text translation form found');
// Use standard form submit event
textTranslationForm.addEventListener('submit', function(event) {
event.preventDefault();
console.log('Text translation form submitted');
// Clear previous results and errors
document.querySelectorAll('#text-result, #error-message, #debug-info').forEach(el => {
if (el) el.style.display = 'none';
});
// Always select elements from the form context
const textInput = this.querySelector('#text-input');
const sourceLang = this.querySelector('#source-lang-text');
const targetLang = this.querySelector('#target-lang-text');
const loadingElement = document.querySelector('#text-loading');
const debugElement = document.querySelector('#debug-info');
// Log which elements were found
console.log('Elements found:', {
textInput: !!textInput,
sourceLang: !!sourceLang,
targetLang: !!targetLang
});
// Show debug info
if (debugElement) {
debugElement.textContent = `Form elements found:
text-input: ${!!textInput}
source-lang-text: ${!!sourceLang}
target-lang-text: ${!!targetLang}`;
debugElement.style.display = 'block';
}
// Check for missing elements
if (!textInput || !sourceLang || !targetLang) {
showError('Form elements not found. Please check the HTML structure.');
return;
}
// Get values
const text = textInput.value ? textInput.value.trim() : '';
if (!text) {
showError('Please enter text to translate');
return;
}
// Get language selections
const sourceLangValue = sourceLang.value;
const targetLangValue = targetLang.value;
// Show loading indicator
if (loadingElement) loadingElement.style.display = 'block';
// Create payload
const payload = {
text: text,
source_lang: sourceLangValue,
target_lang: targetLangValue
};
console.log('Sending payload:', payload);
// Send API request
fetch('/translate/text', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
})
.then(function(response) {
if (!response.ok) throw new Error('Server error: ' + response.status);
return response.text();
})
.then(function(responseText) {
console.log('Response received:', responseText);
// Try to parse JSON
let data;
try {
data = JSON.parse(responseText);
} catch (error) {
throw new Error('Invalid response from server');
}
// Check for translation
if (!data.translated_text) {
throw new Error('No translation returned');
}
// Show result
const resultBox = document.querySelector('#text-result');
const outputElement = document.querySelector('#text-output');
if (resultBox && outputElement) {
outputElement.textContent = data.translated_text;
resultBox.style.display = 'block';
}
})
.catch(function(error) {
showError(error.message || 'Translation failed');
console.error('Error:', error);
})
.finally(function() {
if (loadingElement) loadingElement.style.display = 'none';
});
});
} else {
console.error('Text translation form not found in the document!');
}
// Document translation handler
if (docTranslationForm) {
console.log('Document translation form found');
docTranslationForm.addEventListener('submit', function(event) {
event.preventDefault();
console.log('Document translation form submitted');
// Clear previous results and errors
document.querySelectorAll('#doc-result, #error-message').forEach(el => {
if (el) el.style.display = 'none';
});
// Get form elements
const fileInput = docTranslationForm.querySelector('#doc-input');
const loadingIndicator = document.querySelector('#doc-loading');
if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
showError('Please select a document to upload');
return;
}
// Show loading indicator
if (loadingIndicator) loadingIndicator.style.display = 'block';
// Create form data
const formData = new FormData(docTranslationForm);
// Make API request
fetch('/translate/document', {
method: 'POST',
body: formData
})
.then(function(response) {
if (!response.ok) {
throw new Error(`Server returned ${response.status}`);
}
return response.json();
})
.then(function(data) {
if (!data.translated_text) {
throw new Error('No translation returned');
}
// Display result
const resultBox = document.querySelector('#doc-result');
const outputEl = document.querySelector('#doc-output');
const filenameEl = document.querySelector('#doc-filename');
const sourceLangEl = document.querySelector('#doc-source-lang');
if (resultBox && outputEl) {
if (filenameEl) filenameEl.textContent = data.original_filename || 'N/A';
if (sourceLangEl) sourceLangEl.textContent = data.detected_source_lang || 'N/A';
outputEl.textContent = data.translated_text;
resultBox.style.display = 'block';
}
})
.catch(function(error) {
showError(error.message);
})
.finally(function() {
if (loadingIndicator) {
loadingIndicator.style.display = 'none';
}
});
});
} else {
console.error('Document translation form not found in the document!');
}
// Helper function to show errors
function showError(message) {
const errorDiv = document.querySelector('#error-message');
if (errorDiv) {
errorDiv.textContent = 'Error: ' + message;
errorDiv.style.display = 'block';
}
console.error('Error:', message);
}
};
|