Spaces:
Paused
Paused
File size: 2,446 Bytes
2c2300d 0cd9183 2c2300d 0cd9183 1dfbd42 0cd9183 1dfbd42 0cd9183 1dfbd42 0cd9183 2c2300d 0cd9183 2c2300d 98b125b 2c2300d 0cd9183 2c2300d 0cd9183 2c2300d | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Style Transfer</title>
</head>
<body>
<h1>Image Style Transfer</h1>
<form id="uploadForm">
<input type="file" id="fileInput" accept="image/*" required>
<select id="styleSelect" required>
<option value="">Select Style</option>
<option value="AnimeGANv3_Arcane">AnimeGANv3_Arcane</option>
<option value="AnimeGANv3_Trump v1.0">AnimeGANv3_Trump v1.0</option>
<option value="AnimeGANv3_Shinkai">AnimeGANv3_Shinkai</option>
<!-- Add more style options here -->
</select>
<label for="faceCheckbox">Detect Face?</label>
<input type="checkbox" id="faceCheckbox">
<button type="submit">Upload & Style Transfer</button>
</form>
<div id="resultContainer" style="display: none;">
<h2>Stylized Image</h2>
<img id="resultImage" src="" alt="Stylized Image">
</div>
<script>
document.getElementById('uploadForm').addEventListener('submit', async function(event) {
event.preventDefault();
const fileInput = document.getElementById('fileInput');
const styleSelect = document.getElementById('styleSelect');
const faceCheckbox = document.getElementById('faceCheckbox');
const file = fileInput.files[0];
const style = styleSelect.value;
const if_face = faceCheckbox.checked ? "Yes" : "No";
const formData = new FormData();
formData.append('file', file);
formData.append('Style', style);
formData.append('if_face', if_face);
try {
const response = await fetch('/inference/', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error('Error uploading file');
}
const blob = await response.blob();
const imageURL = URL.createObjectURL(blob);
document.getElementById('resultImage').src = imageURL;
document.getElementById('resultContainer').style.display = 'block';
} catch (error) {
console.error('Error:', error);
}
});
</script>
</body>
</html>
|