8be6a1ecab
- PHP-based web interface for image upscaling using Topaz Labs API - Multiple image upload with batch processing support - AI model selection (Standard V2, Low Resolution V2, CGI, etc.) - Output resolution options from 2K to 8K - Face enhancement feature - Real-time job tracking and status monitoring - Bulk download functionality - Dark mode toggle - Microsoft authentication integration - Comprehensive README with installation instructions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
143 lines
7.9 KiB
PHP
143 lines
7.9 KiB
PHP
<?php include 'config.php'; ?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Topaz Labs Gigapixel Image Upscaler</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
|
|
<link rel="stylesheet" href="css/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>
|
|
<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 -->
|
|
<div id="protected-content">
|
|
<button id="darkModeToggle" class="dark-mode-toggle" title="Toggle Dark Mode">
|
|
<span id="lightModeIcon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
|
|
<!-- Sun icon path -->
|
|
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
|
|
</svg>
|
|
</span>
|
|
<span id="darkModeIcon" style="display: none;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
|
|
<!-- Moon icon path -->
|
|
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<h1>Topaz Labs Gigapixel Image Upscaler</h1>
|
|
<form id="uploadForm" enctype="multipart/form-data">
|
|
<input type="file" name="images[]" accept=".jpg,.jpeg,.png,.bmp,.tiff,.tif,.webp" multiple required>
|
|
<div id="selectedFiles"></div>
|
|
<div class="form-group">
|
|
<label for="output_height">Output Resolution (height):</label>
|
|
<select name="output_height" id="output_height">
|
|
<option value="2000">2K (2000px height)</option>
|
|
<option value="3000">3K (3000px height)</option>
|
|
<option value="4000">4K (4000px height)</option>
|
|
<option value="5000">5K (5000px height)</option>
|
|
<option value="6000">6K (6000px height)</option>
|
|
<option value="7000">7K (7000px height)</option>
|
|
<option value="8000">8K (8000px height)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="model">AI Model:</label>
|
|
<select name="model" id="model">
|
|
<option value="Standard V2">Standard V2</option>
|
|
<option value="Low Resolution V2">Low Resolution V2</option>
|
|
<option value="CGI">CGI</option>
|
|
<option value="High Fidelity V2">High Fidelity V2</option>
|
|
<option value="Text Refine">Text Refine</option>
|
|
<option value="Auto">Auto</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="face_enhancement" checked> Enable Face Enhancement
|
|
</label>
|
|
</div>
|
|
<button type="submit">Upload and Process</button>
|
|
</form>
|
|
<div id="jobList">
|
|
<h2>Current Jobs</h2>
|
|
<button id="bulkDownload" style="display:none;">Bulk Download Selected</button>
|
|
</div>
|
|
<div id="jobHistory">
|
|
<h2>Job History</h2>
|
|
</div>
|
|
<div id="response"></div>
|
|
<!--<div id="debugPanel">
|
|
<h2>Debug Panel</h2>
|
|
<pre id="debugInfo"></pre>
|
|
</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: "01d33c7c-5640-4986-b4db-06af63a7d285",
|
|
authority: "https://login.microsoftonline.com/e519c2e6-bc6d-4fdf-8d9c-923c2f002385",
|
|
redirectUri: "https://brandtechsandbox.oliver.solutions/image-scale/"
|
|
},
|
|
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 = 'block'; // 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>
|
|
<!-- end auth block -->
|
|
</body>
|
|
</html>
|