Hugging Face's logo

Spaces:
ddnb338
/
lumos-app
Runtime error

App Files Community
lumos-app / app /templates /index.html
ddnb338's picture
ddnb338
Update app/templates/index.html
b6cf4b8 verified
raw
history blame contribute delete
7.94 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let's Guess That Pose</title>
<style>
body {
background-color: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
h1 {
font-family: 'Comic Sans MS', cursive, sans-serif;
color: #FF69B4; /* Pink */
font-size: 72px; /* Bigger font size */
text-align: center; /* Center align */
margin-bottom: 20px; /* Some spacing under the title */
}
button {
font-size: 24px; /* Adjust button font size */
background-color: #FF0066; /* Dark pink background color */
color: white; /* White lettering */
padding: 10px 20px; /* Padding for the button */
border: none; /* Remove border */
border-radius: 5px; /* Add border radius */
cursor: pointer; /* Change cursor on hover */
transition: background-color 0.3s; /* Smooth transition */
}
button:hover {
background-color: #E6005C; /* Darker pink on hover */
}
#main-container {
color:white;
display: flex; /* Use flexbox layout */
align-items: flex-start; /* Align items at the start of the container */
justify-content: center; /* Center align child elements horizontally */
margin-top: 20px; /* Add margin space */
width: 100%;
}
#buttons-container {
display: flex; /* Use flexbox layout */
justify-content: center; /* Center child elements horizontally */
margin-bottom: 20px; /* Add margin at the bottom */
align-items: center;
}
#video-container,
#modified-image-container {
margin: 0 20px; /* Add horizontal margin space */
}
#video-container video{
width: 100%; /* Ensure the video fills its container */
height: 100%;
}
#video-container video,
#modified-image-container img {
height: auto; /* Maintain aspect ratio */
display: block; /* Ensure images fill their container */
margin-bottom: 10px; /* Add space between the video and the image */
}
#modified-image-container img{
width: 400px;
}
#countdown {
font-size: 48px;
color: pink;
display: none; /* Initially hide the countdown */
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Let's Guess That Pose</h1>
<div id ="buttons-container">
<button id="start">Start</button>
<label class="switch">
<input type="checkbox" id = "model-toggle" onchange="toggleCheckbox()">
<span class="slider round"></span>
</label>
</div>
<div id="main-container">
<div id="video-container">
<video width="800" height="800" id="video" autoplay></video>
<canvas width="800" height="800" id="canvas" style="display:none;"></canvas>
<div id="countdown">10</div>
</div>
<div id="modified-image-container">
<img id="modifiedImage" src="https://steamuserimages-a.akamaihd.net/ugc/936063271541499414/3C62E6915EF2AB9EEBF6712CC4E230CE43CC04B5/?imw=1024&imh=1024&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true" alt="Original Image">
<div id="guess"></div>
</div>
</div>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const startButton = document.getElementById('start');
const countdownElement = document.getElementById('countdown');
const guessElement = document.getElementById('guess');
const keypointImage = document.getElementById('modifiedImage');
let countdown = 10;
let useModelGAN = false;
let imageID = 0;
// Access the camera
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
video.srcObject = stream;
})
.catch((err) => {
console.error('Error accessing the camera: ', err);
});
function captureImage() {
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = canvas.toDataURL('image/png');
// Send image data to Flask route for processing
fetch('https://ddnb338-lumos-app.hf.space/upload', {
method: 'POST',
body: JSON.stringify({ image_data: imageData, use_model_gan: useModelGAN, unique_ID: imageID }),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.text())
.then(data => {
//if (data != 'No keypoints detected'){
//keypointImage.src = `static/keypoint_image_${imageID}.jpg`;
// }
keypointImage.src = `static/keypoint_image_${imageID}.jpg`;
guessElement.textContent = `Prediction: ${data}`;
})
.catch(error => console.error('Error sending image data: ', error));
}
function startCountdown() {
countdownElement.style.display = 'block'; // Show the countdown
if (countdown > 0) {
countdownElement.textContent = countdown;
setTimeout(startCountdown, 1000); //will call startCountdown again after 1000 milliseconds
countdown--;
} else {
captureImage();
countdown = 5;
countdownElement.style.display = 'none';
}
}
function toggleCheckbox() {
useModelGAN = document.getElementById('model-toggle').checked;
}
startButton.addEventListener('click', () => {
keypointImage.src = 'https://steamuserimages-a.akamaihd.net/ugc/936063271541499414/3C62E6915EF2AB9EEBF6712CC4E230CE43CC04B5/?imw=1024&imh=1024&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true';
guessElement.textContent = '';
startCountdown();
imageID++;
});
</script>
</body>
</html>