Spaces:
Sleeping
Sleeping
File size: 4,107 Bytes
9a60dd2 7aa19fa 9a60dd2 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image and Video Processing</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#container {
width: 90%;
max-width: 800px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333333;
margin-bottom: 30px;
}
label {
font-weight: bold;
color: #444444;
display: block;
margin-bottom: 5px;
}
input[type="file"] {
display: block;
margin-bottom: 15px;
width: 100%;
}
input[type="checkbox"] {
margin-right: 8px;
}
input[type="submit"] {
background-color: #4285f4;
color: white;
border: none;
padding: 12px 25px;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
width: 100%;
}
input[type="submit"]:hover {
background-color: #2a75d7;
}
#preview {
text-align: center;
margin-top: 20px;
}
#preview img {
max-width: 100%;
max-height: 300px;
margin-top: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
<script>
function previewImage(input, previewId) {
var preview = document.getElementById(previewId);
var file = input.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
preview.innerHTML = '';
preview.appendChild(image);
};
reader.readAsDataURL(file);
}
</script>
</head>
<body>
<div id="container">
<h1>Image and Video Processing</h1>
<div style="background-color: #f2f2f2; border-left: 6px solid #3366cc; padding: 15px;">
<p><strong>Note:</strong> This Space is currently unstable.</p>
<p>Please use the <a href="https://huggingface.co/spaces/imseldrith/DeepFakeAI" target="_blank" style="color: #3366cc; font-weight: bold; text-decoration: none;">New Version</a> for a more stable experience.</p>
</div>
<form method="post" enctype="multipart/form-data">
<label for="source">Upload Source Image/Video:</label>
<input type="file" id="source" name="source" onchange="previewImage(this, 'sourcePreview')">
<div id="sourcePreview"></div>
<label for="target">Upload Target Image/Video:</label>
<input type="file" id="target" name="target" onchange="previewImage(this, 'targetPreview')">
<div id="targetPreview"></div>
<label>Frame Processors:</label>
<div style="display: flex; align-items: center;">
<input type="checkbox" id="face_swapper" name="frame_processor" value="face_swapper">
<label for="face_swapper">Face Swapper</label>
</div>
<div style="display: flex; align-items: center;">
<input type="checkbox" id="face_enhancer" name="frame_processor" value="face_enhancer">
<label for="face_enhancer">Face Enhancer</label>
</div>
<div style="text-align: center; margin-top: 25px;">
<input type="submit" value="Process">
</div>
</form>
</div>
</body>
</html>
|