Spaces:
Running
Running
| <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%; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| background-color: #0d0d0d; | |
| color: #ffffff; | |
| } | |
| #loading { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, #0a0f24, #0d47a1); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 24px; | |
| font-weight: 500; | |
| color: #00e5ff; | |
| z-index: 1000; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100vh; | |
| border: none; | |
| background-color: #0d0d0d; | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="loading">Selecting optimal server...</div> | |
| <iframe id="streamlit-frame"></iframe> | |
| <script> | |
| // List of available servers | |
| const SERVERS = [ | |
| "https://fluxpro3-kdykor8nubyjbs9ksh9wfp.streamlit.app/?embed=true", | |
| "https://fluxpro3-kdykor8nubyjbs9ksh9wfp.streamlit.app/?embed=true" | |
| ]; | |
| // Function to check the response speed of a server | |
| 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; | |
| } | |
| } | |
| // Function to choose the server based on response speed | |
| async function chooseServer() { | |
| const speeds = await Promise.all(SERVERS.map(checkServerSpeed)); | |
| const fastestIndex = speeds.indexOf(Math.min(...speeds)); | |
| return SERVERS[fastestIndex]; | |
| } | |
| // Function to load the Streamlit app | |
| async function loadStreamlit() { | |
| const loadingElement = document.getElementById('loading'); | |
| const iframe = document.getElementById('streamlit-frame'); | |
| // Check if a URL is already stored in sessionStorage | |
| let chosenUrl = sessionStorage.getItem('streamlitUrl'); | |
| if (!chosenUrl) { | |
| // If not, select a server and save the URL to sessionStorage | |
| chosenUrl = await chooseServer(); | |
| sessionStorage.setItem('streamlitUrl', chosenUrl); | |
| } | |
| // Display the iframe and hide the loading screen | |
| iframe.src = chosenUrl; | |
| iframe.onload = () => { | |
| loadingElement.style.opacity = '0'; | |
| setTimeout(() => loadingElement.style.display = 'none', 300); | |
| iframe.style.opacity = '1'; | |
| }; | |
| } | |
| // Run loadStreamlit when the page loads | |
| window.onload = loadStreamlit; | |
| </script> | |
| </body> | |
| </html> | |