Hugging Face's logo

Spaces:
llamameta
/
flux-pro-uncensored
Running

App Files Community
4
llamameta commited on
Commit
e3a4023
•
1 Parent(s): 7d7f419

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +60 -12
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Black Forest Labs</title>
7
  <style>
8
  html, body {
9
  margin: 0;
@@ -11,6 +11,19 @@
11
  width: 100%;
12
  height: 100%;
13
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  iframe {
15
  width: 100%;
16
  height: 100vh;
@@ -19,23 +32,58 @@
19
  </style>
20
  </head>
21
  <body>
 
22
  <iframe id="streamlit-frame"></iframe>
23
 
24
  <script>
25
- const urls = [
26
- "https://fluxpro-jpzeauvnu9lyzzgmxoxzfh.streamlit.app/?embed=true",
27
- "https://square-disk-5955.ploomberapp.io/?embed=true"
28
- ];
29
-
30
- function loadBalancedUrl() {
31
- const randomIndex = Math.floor(Math.random() * urls.length);
32
- return urls[randomIndex];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  }
34
 
35
- window.onload = function() {
36
- const iframe = document.getElementById('streamlit-frame');
37
- iframe.src = loadBalancedUrl();
 
38
  };
 
 
 
 
39
  </script>
40
  </body>
41
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Black Forest Labs - Load Balanced Streamlit</title>
7
  <style>
8
  html, body {
9
  margin: 0;
 
11
  width: 100%;
12
  height: 100%;
13
  }
14
+ #loading {
15
+ position: fixed;
16
+ top: 0;
17
+ left: 0;
18
+ width: 100%;
19
+ height: 100%;
20
+ background: rgba(255, 255, 255, 0.8);
21
+ display: flex;
22
+ justify-content: center;
23
+ align-items: center;
24
+ font-size: 24px;
25
+ z-index: 1000;
26
+ }
27
  iframe {
28
  width: 100%;
29
  height: 100vh;
 
32
  </style>
33
  </head>
34
  <body>
35
+ <div id="loading">Memilih server optimal...</div>
36
  <iframe id="streamlit-frame"></iframe>
37
 
38
  <script>
39
+ const SERVERS = [
40
+ "https://fluxpro-jpzeauvnu9lyzzgmxoxzfh.streamlit.app/?embed=true",
41
+ "https://square-disk-5955.ploomberapp.io/?embed=true"
42
+ ];
43
+
44
+ // Fungsi untuk mengecek kecepatan respons server
45
+ async function checkServerSpeed(url) {
46
+ const start = performance.now();
47
+ try {
48
+ const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' });
49
+ const end = performance.now();
50
+ return end - start;
51
+ } catch (error) {
52
+ console.error(`Error checking ${url}:`, error);
53
+ return Infinity;
54
+ }
55
+ }
56
+
57
+ // Fungsi untuk memilih server berdasarkan kecepatan respons
58
+ async function chooseServer() {
59
+ const speeds = await Promise.all(SERVERS.map(checkServerSpeed));
60
+ const fastestIndex = speeds.indexOf(Math.min(...speeds));
61
+ return SERVERS[fastestIndex];
62
+ }
63
+
64
+ // Fungsi untuk memuat Streamlit
65
+ async function loadStreamlit() {
66
+ const loadingElement = document.getElementById('loading');
67
+ const iframe = document.getElementById('streamlit-frame');
68
+
69
+ // Cek apakah sudah ada URL yang tersimpan di sessionStorage
70
+ let chosenUrl = sessionStorage.getItem('streamlitUrl');
71
+
72
+ if (!chosenUrl) {
73
+ // Jika belum ada, pilih server dan simpan ke sessionStorage
74
+ chosenUrl = await chooseServer();
75
+ sessionStorage.setItem('streamlitUrl', chosenUrl);
76
  }
77
 
78
+ // Tampilkan iframe dan sembunyikan loading
79
+ iframe.src = chosenUrl;
80
+ iframe.onload = () => {
81
+ loadingElement.style.display = 'none';
82
  };
83
+ }
84
+
85
+ // Jalankan loadStreamlit saat halaman dimuat
86
+ window.onload = loadStreamlit;
87
  </script>
88
  </body>
89
  </html>