|
<!DOCTYPE html> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" /> |
|
<html lang="en"> |
|
<head> |
|
<title>Real-time ASL Translator</title> |
|
<link rel="preconnect" href="https://fonts.googleapis.com" /> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet" /> |
|
<link rel="stylesheet" href="index.css" /> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> |
|
|
|
<div id="result"></div> |
|
|
|
<script type="text/javascript" charset="utf-8"> |
|
const result_element = document.getElementById('result') |
|
let previous_result = '' |
|
result_element.style.opacity = '1' |
|
|
|
const timestep = 1 / 60 |
|
let opacity_progress = 1 |
|
|
|
const ease_in_expo = (progress_value) => |
|
progress_value == 0.0 ? 0.0 : Math.pow(2.0, 10.0 * progress_value - 10.0) |
|
|
|
setInterval(() => { |
|
opacity_progress -= 0.0025 |
|
result_element.style.opacity = String(ease_in_expo(opacity_progress)) |
|
if (Number(result_element.style.opacity) <= 0.05) { |
|
result_element.replaceChildren() |
|
} |
|
}, timestep * 1000) |
|
|
|
setInterval(async () => { |
|
const result = await fetch('http://localhost:5000/') |
|
|
|
if (result.status !== 200) return |
|
const result_text = await result.text() |
|
|
|
if (result_text === '') return |
|
if (result_text !== previous_result) { |
|
previous_result = result_text |
|
const word = document.createElement('span') |
|
word.className = 'word' |
|
word.innerHTML = result_text |
|
result_element.appendChild(word) |
|
opacity_progress = 1 |
|
|
|
gsap.fromTo( |
|
word, |
|
{ |
|
autoAlpha: 0, |
|
filter: 'blur(10px)', |
|
y: 40 |
|
}, |
|
{ |
|
autoAlpha: 1, |
|
filter: 'blur(0px)', |
|
y: 0, |
|
ease: 'Expo.easeOut', |
|
duration: 0.5 |
|
} |
|
) |
|
} |
|
}, 250) |
|
</script> |
|
</head> |
|
</html> |
|
|
