File size: 2,162 Bytes
3afff35 |
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>
<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>
|