File size: 4,743 Bytes
befd7da |
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 |
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');
// CORS options
const corsOptions = {
origin: '*', // Allow only HTTP requests from port 8080
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
};
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);
// Define the proxy route
app.use('/api', createProxyMiddleware({
target: 'http://localhost:8999', // Target host
changeOrigin: true, // Needed for virtual hosted sites
pathRewrite: {
'^/api': '', // Rewrite URL: remove '/api' (if needed)
},
}));
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}`);
}); |