|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Black Forest Labs - Load Balanced Streamlit</title> |
|
<style> |
|
html, body { |
|
margin: 0; |
|
padding: 0; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
#loading { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(255, 255, 255, 0.8); |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 24px; |
|
z-index: 1000; |
|
} |
|
iframe { |
|
width: 100%; |
|
height: 100vh; |
|
border: none; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="loading">Memilih server optimal...</div> |
|
<iframe id="streamlit-frame"></iframe> |
|
|
|
<script> |
|
const SERVERS = [ |
|
"https://fluxpro3-kdykor8nubyjbs9ksh9wfp.streamlit.app/?embed=true", |
|
"https://fluxpro3-kdykor8nubyjbs9ksh9wfp.streamlit.app/?embed=true" |
|
]; |
|
|
|
|
|
async function checkServerSpeed(url) { |
|
const start = performance.now(); |
|
try { |
|
const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' }); |
|
const end = performance.now(); |
|
return end - start; |
|
} catch (error) { |
|
console.error(`Error checking ${url}:`, error); |
|
return Infinity; |
|
} |
|
} |
|
|
|
|
|
async function chooseServer() { |
|
const speeds = await Promise.all(SERVERS.map(checkServerSpeed)); |
|
const fastestIndex = speeds.indexOf(Math.min(...speeds)); |
|
return SERVERS[fastestIndex]; |
|
} |
|
|
|
|
|
async function loadStreamlit() { |
|
const loadingElement = document.getElementById('loading'); |
|
const iframe = document.getElementById('streamlit-frame'); |
|
|
|
|
|
let chosenUrl = sessionStorage.getItem('streamlitUrl'); |
|
|
|
if (!chosenUrl) { |
|
|
|
chosenUrl = await chooseServer(); |
|
sessionStorage.setItem('streamlitUrl', chosenUrl); |
|
} |
|
|
|
|
|
iframe.src = chosenUrl; |
|
iframe.onload = () => { |
|
loadingElement.style.display = 'none'; |
|
}; |
|
} |
|
|
|
|
|
window.onload = loadStreamlit; |
|
</script> |
|
</body> |
|
</html> |
