msft-trns/index.php
2026-03-02 17:21:57 +00:00

250 lines
12 KiB
PHP

<?php
include 'config.php';
include 'cleanup.php';
// Run cleanup on page load
cleanupOldFiles();
?>
<!DOCTYPE html>
<head>
<div style="background-color: #ff0000; color: white; padding: 10px; text-align: center;">
AI Sandbox - NOT FOR PRODUCTION USE - <a href="https://olivermarketing.sharepoint.com/sites/AIFROMTHEINSIDE/" style="color: white; text-decoration: underline;">Click Here for Production Tools</a>
</div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Translator</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- auth 1 of 4 -->
<script src="https://alcdn.msauth.net/browser/2.15.0/js/msal-browser.min.js" crossorigin="anonymous"></script>
<style>
#protected-content {
display: none;
}
</style>
<!-- end auth block -->
</head>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Microsoft Document Translator</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- auth 2 of 4 -->
<div style="text-align: left;">
<button id="logout-button" onclick="signOut()" style="display:none;">Log Out</button>
<button id="login-button" onclick="signIn()" style="display:none;">Log In</button>
</div>
<!-- end auth block -->
<h1>Microsoft Document Translator</h1>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="documents[]" accept=".docx,.doc,.pptx,.xlsx,.pdf,.htm,.html,.txt" multiple required>
<div id="selectedFiles"></div>
<select name="source_lang" required>
<option value="">Select source language</option>
<option value="AUTO">Auto Detect</option>
<option value="af">Afrikaans</option>
<option value="ar">Arabic</option>
<option value="bg">Bulgarian</option>
<option value="bn">Bengali</option>
<option value="bs">Bosnian</option>
<option value="ca">Catalan</option>
<option value="cs">Czech</option>
<option value="cy">Welsh</option>
<option value="da">Danish</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="et">Estonian</option>
<option value="fa">Persian</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="he">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hr">Croatian</option>
<option value="ht">Haitian Creole</option>
<option value="hu">Hungarian</option>
<option value="id">Indonesian</option>
<option value="is">Icelandic</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="lt">Lithuanian</option>
<option value="lv">Latvian</option>
<option value="ms">Malay</option>
<option value="mt">Maltese</option>
<option value="nl">Dutch</option>
<option value="nb">Norwegian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="sr">Serbian</option>
<option value="sv">Swedish</option>
<option value="sw">Swahili</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="vi">Vietnamese</option>
<option value="zh-Hans">Chinese (Simplified)</option>
<option value="zh-Hant">Chinese (Traditional)</option>
</select>
<select name="target_lang" required>
<option value="">Select target language</option>
<option value="af">Afrikaans</option>
<option value="ar">Arabic</option>
<option value="bg">Bulgarian</option>
<option value="bn">Bengali</option>
<option value="bs">Bosnian</option>
<option value="ca">Catalan</option>
<option value="cs">Czech</option>
<option value="cy">Welsh</option>
<option value="da">Danish</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="en">English</option>
<option value="en-GB">English (British)</option>
<option value="en-US">English (American)</option>
<option value="es">Spanish</option>
<option value="et">Estonian</option>
<option value="fa">Persian</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="he">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hr">Croatian</option>
<option value="ht">Haitian Creole</option>
<option value="hu">Hungarian</option>
<option value="id">Indonesian</option>
<option value="is">Icelandic</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="lt">Lithuanian</option>
<option value="lv">Latvian</option>
<option value="ms">Malay</option>
<option value="mt">Maltese</option>
<option value="nl">Dutch</option>
<option value="nb">Norwegian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="pt-PT">Portuguese (Portugal)</option>
<option value="pt-BR">Portuguese (Brazil)</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="sr">Serbian</option>
<option value="sv">Swedish</option>
<option value="sw">Swahili</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="vi">Vietnamese</option>
<option value="zh-Hans">Chinese (Simplified)</option>
<option value="zh-Hant">Chinese (Traditional)</option>
</select>
<select name="formality">
<option value="default">Default formality</option>
<option value="more">More formal</option>
<option value="less">Less formal</option>
</select>
<button type="submit">Upload and Translate</button>
</form>
<div id="jobList">
<h2>Current Jobs</h2>
<button id="bulkDownload" style="display:none;">Bulk Download Selected</button>
</div>
<h3 id="apiStatus">Status: Using Microsoft Document Translation API with Azure Storage</h3>
<div id="apiInfo">
</li>Document Translation API limit: 20MB per document</li>
</li>Character limit: 40,000 characters per document</li>
<p><strong>Current Configuration:</strong></p>
<ul>
<li>API: Microsoft Document Translation API</li>
<li>Storage: Azure Blob Storage</li>
<li>Region: East US</li>
</ul>
<p class="small">Note: Translation jobs are stored for 24 hours only.</p>
</div>
<div id="jobHistory">
<h2>Job History</h2>
</div>
<div id="response"></div>
<script src="js/script.js"></script>
<!-- auth 4 of 4 NOTE: ensure values for clientID, authority (URL with tenant ID) and redirectUri are correct below -->
<script>
const msalConfig = {
auth: {
clientId: "9079054c-9620-4757-a256-23413042f1ef",
authority: "https://login.microsoftonline.com/e519c2e6-bc6d-4fdf-8d9c-923c2f002385",
redirectUri: "https://ai-sandbox.oliver.solutions/format"
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: true,
}
};
const loginRequest = {
scopes: ["user.read"]
};
const myMSALObj = new msal.PublicClientApplication(msalConfig);
signIn();
function signIn() {
myMSALObj.loginPopup(loginRequest)
.then(loginResponse => {
console.log("User logged in:", loginResponse.account.username);
thisUser = loginResponse.account.username;
sessionStorage.setItem('accessToken', loginResponse.accessToken);
showProtectedContent(); // Show protected content after successful login
onAuthenticated(); // Special for this app
}).catch(error => {
console.error("Error during login:", error);
});
}
function signOut() {
// Clear the session storage and (does not) sign out from Microsoft Identity
sessionStorage.removeItem('accessToken');
//myMSALObj.logoutPopup();
console.log("User logged out.");
document.getElementById('protected-content').style.display = 'none'; // Hide protected content
document.getElementById('logout-button').style.display = 'none'; // Hide logout button
document.getElementById('login-button').style.display = 'flex'; // Show login button
}
function showProtectedContent() {
// Verify that the access token exists before showing protected content
const accessToken = sessionStorage.getItem('accessToken');
if (accessToken) {
document.getElementById('protected-content').style.display = 'block';
document.getElementById('logout-button').style.display = 'flex'; // Show logout button
document.getElementById('login-button').style.display = 'none'; // Hide login button
}
}
// Check if the user is already logged in when the page loads
window.addEventListener('load', showProtectedContent);
</script>
</body>
</html>