|
|
const express = require('express'); |
|
|
const path = require('path'); |
|
|
const fs = require('fs'); |
|
|
const basicAuth = require('basic-auth'); |
|
|
const app = express(); |
|
|
const port = 8081; |
|
|
const cors = require('cors'); |
|
|
const { createProxyMiddleware } = require('http-proxy-middleware'); |
|
|
|
|
|
|
|
|
const corsOptions = { |
|
|
origin: '*', |
|
|
optionsSuccessStatus: 200 |
|
|
}; |
|
|
|
|
|
app.use(cors(corsOptions)); |
|
|
|
|
|
const authMiddleware = (req, res, next) => { |
|
|
const unauthorized = (res) => {res.set('WWW-Authenticate', 'Basic realm=Authorization Required');return res.sendStatus(401);}; |
|
|
const user = basicAuth(req); |
|
|
if (!user || !user.name || !user.pass) {return unauthorized(res);} |
|
|
if (user.name === 'ace' && user.pass === '2024=ace=2024') {return next();} else {return unauthorized(res);} |
|
|
}; |
|
|
|
|
|
app.use(authMiddleware); |
|
|
|
|
|
|
|
|
app.use('/api', createProxyMiddleware({ |
|
|
target: 'http://localhost:8999', |
|
|
changeOrigin: true, |
|
|
pathRewrite: { |
|
|
'^/api': '', |
|
|
}, |
|
|
})); |
|
|
|
|
|
const pageHeader = `<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Image Processing Form</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<h2>Image Processing Form</h2> |
|
|
|
|
|
<form id="imageForm"> |
|
|
Reference Image: <input type="file" id="refImage" accept="image/*"><br> |
|
|
Reference Mask: <input type="file" id="refMask" accept="image/*"><br> |
|
|
Target Image: <input type="file" id="tarImage" accept="image/*"><br> |
|
|
Target Mask: <input type="file" id="tarMask" accept="image/*"><br> |
|
|
<button type="button" onclick="submitImages()">Submit Images</button> |
|
|
</form> |
|
|
|
|
|
<h3>Previews</h3> |
|
|
<div id="previews"> |
|
|
<img id="previewRefImage" style="max-width: 100px; display: none;"> |
|
|
<img id="previewRefMask" style="max-width: 100px; display: none;"> |
|
|
<img id="previewTarImage" style="max-width: 100px; display: none;"> |
|
|
<img id="previewTarMask" style="max-width: 100px; display: none;"> |
|
|
</div> |
|
|
|
|
|
<h3>Processed Image</h3> |
|
|
<img id="processedImage" style="max-width: 200px; display: none;"> |
|
|
|
|
|
<script> |
|
|
async function submitImages() { |
|
|
// Convert images to base64 |
|
|
const refImage = await toBase64(document.getElementById('refImage').files[0]); |
|
|
const refMask = await toBase64(document.getElementById('refMask').files[0]); |
|
|
const tarImage = await toBase64(document.getElementById('tarImage').files[0]); |
|
|
const tarMask = await toBase64(document.getElementById('tarMask').files[0]); |
|
|
|
|
|
// Preview images |
|
|
previewImage('previewRefImage', document.getElementById('refImage').files[0]); |
|
|
previewImage('previewRefMask', document.getElementById('refMask').files[0]); |
|
|
previewImage('previewTarImage', document.getElementById('tarImage').files[0]); |
|
|
previewImage('previewTarMask', document.getElementById('tarMask').files[0]); |
|
|
|
|
|
// Construct JSON payload |
|
|
const data = JSON.stringify({ |
|
|
ref_image: refImage, |
|
|
ref_mask: refMask, |
|
|
tar_image: tarImage, |
|
|
tar_mask: tarMask, |
|
|
steps: 50, |
|
|
seed: 1355555, |
|
|
guidance_scale: 5 |
|
|
}); |
|
|
|
|
|
// Replace 'your_endpoint_url' with the actual endpoint URL |
|
|
axios.post('/api', data, { |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
'X-API-Key': 'xiCQTaoQKXUNATzuFLWRgtoJKiFXiDGvnk' // Adjust if you're using API key authentication |
|
|
} |
|
|
}) |
|
|
.then(function (response) { |
|
|
// Handle success |
|
|
document.getElementById('processedImage').src = response.data; |
|
|
document.getElementById('processedImage').style.display = 'block'; |
|
|
}) |
|
|
.catch(function (error) { |
|
|
// Handle error |
|
|
console.log('Error:', error); |
|
|
}); |
|
|
} |
|
|
|
|
|
function toBase64(file) { |
|
|
return new Promise((resolve, reject) => { |
|
|
const reader = new FileReader(); |
|
|
reader.readAsDataURL(file); |
|
|
reader.onload = () => resolve(reader.result.split(',')[1]); // Remove the data URL part |
|
|
reader.onerror = error => reject(error); |
|
|
}); |
|
|
} |
|
|
|
|
|
function previewImage(previewId, file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
document.getElementById(previewId).src = e.target.result; |
|
|
document.getElementById(previewId).style.display = 'block'; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
`; |
|
|
|
|
|
app.get('/', (req, res) => { |
|
|
res.send(pageHeader); |
|
|
}); |
|
|
|
|
|
app.listen(port, () => { |
|
|
console.log(`Server running at http://localhost:${port}`); |
|
|
}); |
