|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>VitalSign AI - Video Capture</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.video-container { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
max-width: 640px; |
|
|
margin: 0 auto; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.video-preview { |
|
|
width: 100%; |
|
|
background: #000; |
|
|
aspect-ratio: 16/9; |
|
|
} |
|
|
|
|
|
.recording-indicator { |
|
|
position: absolute; |
|
|
top: 15px; |
|
|
right: 15px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
color: white; |
|
|
font-size: 14px; |
|
|
background: rgba(255, 0, 0, 0.7); |
|
|
padding: 4px 10px; |
|
|
border-radius: 20px; |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.progress-container { |
|
|
height: 6px; |
|
|
background: #e2e8f0; |
|
|
border-radius: 3px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 100%; |
|
|
background: #3b82f6; |
|
|
width: 0%; |
|
|
transition: width 0.1s linear; |
|
|
} |
|
|
|
|
|
.result-card { |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
transition: all 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.result-card.show { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">VitalSign AI</h1> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto"> |
|
|
Capture a 60-second video of your face to extract vital signs including heart rate, |
|
|
respiratory rate, and blood oxygen levels using our advanced AI technology. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Video Capture</h2> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Please ensure good lighting and keep your face centered in the frame. |
|
|
The video will automatically stop after 60 seconds. |
|
|
</p> |
|
|
|
|
|
<div class="video-container mb-4"> |
|
|
<video id="videoPreview" class="video-preview" playsinline autoplay muted></video> |
|
|
<div id="recordingIndicator" class="recording-indicator hidden"> |
|
|
<span class="w-3 h-3 bg-white rounded-full mr-2 pulse"></span> |
|
|
RECORDING |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="progress-container mb-4"> |
|
|
<div id="progressBar" class="progress-bar"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button id="startBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Start Recording |
|
|
</button> |
|
|
<button id="stopBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium flex items-center hidden"> |
|
|
<i class="fas fa-stop mr-2"></i> Stop |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 md:pl-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Instructions</h2> |
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6"> |
|
|
<div class="flex items-start mb-3"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-lightbulb text-blue-600"></i> |
|
|
</div> |
|
|
<p class="text-blue-800"> |
|
|
For best results, position yourself about 2 feet from the camera in a well-lit area. |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex items-start mb-3"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-lightbulb text-blue-600"></i> |
|
|
</div> |
|
|
<p class="text-blue-800"> |
|
|
Keep still during recording and avoid talking or moving your head excessively. |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-lightbulb text-blue-600"></i> |
|
|
</div> |
|
|
<p class="text-blue-800"> |
|
|
The AI analyzes subtle changes in skin color and movement to detect vital signs. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="resultSection" class="result-card"> |
|
|
<h3 class="text-xl font-medium text-gray-800 mb-3">Your Recording</h3> |
|
|
<div class="border border-gray-200 rounded-lg p-4 mb-4"> |
|
|
<video id="recordedVideo" controls class="w-full rounded-lg mb-3"></video> |
|
|
<div class="flex justify-between"> |
|
|
<span id="recordingTime" class="text-gray-600">Duration: 0s</span> |
|
|
<button id="downloadBtn" class="text-blue-600 hover:text-blue-800 flex items-center"> |
|
|
<i class="fas fa-download mr-1"></i> Download |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="analyzeBtn" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium flex items-center justify-center"> |
|
|
<i class="fas fa-brain mr-2"></i> Analyze with AI |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="analysisModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-xl p-6 max-w-md w-full mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Processing Video</h3> |
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="text-center py-8"> |
|
|
<div class="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-500 mx-auto mb-4"></div> |
|
|
<p class="text-gray-600">Our AI is analyzing your video to extract vital signs. This may take a few moments...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const videoPreview = document.getElementById('videoPreview'); |
|
|
const recordedVideo = document.getElementById('recordedVideo'); |
|
|
const startBtn = document.getElementById('startBtn'); |
|
|
const stopBtn = document.getElementById('stopBtn'); |
|
|
const recordingIndicator = document.getElementById('recordingIndicator'); |
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
const resultSection = document.getElementById('resultSection'); |
|
|
const downloadBtn = document.getElementById('downloadBtn'); |
|
|
const analyzeBtn = document.getElementById('analyzeBtn'); |
|
|
const recordingTime = document.getElementById('recordingTime'); |
|
|
const analysisModal = document.getElementById('analysisModal'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
|
|
|
|
|
|
let mediaRecorder; |
|
|
let recordedChunks = []; |
|
|
let recordingStartTime; |
|
|
let timerInterval; |
|
|
const recordingDuration = 60; |
|
|
|
|
|
|
|
|
async function initCamera() { |
|
|
try { |
|
|
const stream = await navigator.mediaDevices.getUserMedia({ |
|
|
video: { |
|
|
width: { ideal: 640 }, |
|
|
height: { ideal: 480 }, |
|
|
facingMode: 'user' |
|
|
}, |
|
|
audio: false |
|
|
}); |
|
|
videoPreview.srcObject = stream; |
|
|
|
|
|
|
|
|
mediaRecorder = new MediaRecorder(stream, { |
|
|
mimeType: 'video/webm' |
|
|
}); |
|
|
|
|
|
mediaRecorder.ondataavailable = function(e) { |
|
|
if (e.data.size > 0) { |
|
|
recordedChunks.push(e.data); |
|
|
} |
|
|
}; |
|
|
|
|
|
mediaRecorder.onstop = function() { |
|
|
const blob = new Blob(recordedChunks, { type: 'video/webm' }); |
|
|
const videoURL = URL.createObjectURL(blob); |
|
|
recordedVideo.src = videoURL; |
|
|
|
|
|
|
|
|
resultSection.classList.add('show'); |
|
|
|
|
|
|
|
|
downloadBtn.onclick = function() { |
|
|
const a = document.createElement('a'); |
|
|
a.href = videoURL; |
|
|
a.download = `vitalsign-${new Date().toISOString().slice(0,10)}.webm`; |
|
|
a.click(); |
|
|
}; |
|
|
}; |
|
|
|
|
|
} catch (err) { |
|
|
console.error('Error accessing camera:', err); |
|
|
alert('Could not access the camera. Please ensure you have granted camera permissions.'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function startRecording() { |
|
|
recordedChunks = []; |
|
|
mediaRecorder.start(10); |
|
|
recordingStartTime = Date.now(); |
|
|
recordingIndicator.classList.remove('hidden'); |
|
|
startBtn.classList.add('hidden'); |
|
|
stopBtn.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
let secondsElapsed = 0; |
|
|
timerInterval = setInterval(() => { |
|
|
secondsElapsed = Math.floor((Date.now() - recordingStartTime) / 1000); |
|
|
const progressPercent = (secondsElapsed / recordingDuration) * 100; |
|
|
progressBar.style.width = `${Math.min(progressPercent, 100)}%`; |
|
|
recordingTime.textContent = `Duration: ${secondsElapsed}s`; |
|
|
|
|
|
|
|
|
if (secondsElapsed >= recordingDuration) { |
|
|
stopRecording(); |
|
|
} |
|
|
}, 100); |
|
|
} |
|
|
|
|
|
|
|
|
function stopRecording() { |
|
|
clearInterval(timerInterval); |
|
|
mediaRecorder.stop(); |
|
|
recordingIndicator.classList.add('hidden'); |
|
|
stopBtn.classList.add('hidden'); |
|
|
startBtn.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const stream = videoPreview.srcObject; |
|
|
const tracks = stream.getTracks(); |
|
|
tracks.forEach(track => track.stop()); |
|
|
} |
|
|
|
|
|
|
|
|
function analyzeWithAI() { |
|
|
|
|
|
|
|
|
analysisModal.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
analysisModal.classList.add('hidden'); |
|
|
alert('Analysis complete! In a real implementation, this would show the extracted vital signs.'); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
startBtn.addEventListener('click', startRecording); |
|
|
stopBtn.addEventListener('click', stopRecording); |
|
|
analyzeBtn.addEventListener('click', analyzeWithAI); |
|
|
closeModal.addEventListener('click', () => analysisModal.classList.add('hidden')); |
|
|
|
|
|
|
|
|
initCamera(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MrEzzat/trial2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
