Fix embedded demo status without cross-origin fetch

index.html

@@ -367,32 +367,31 @@
     </main>
 
     <script>
-      const upstreamInfo =
-        "https://24yearsold-see-through-demo.hf.space/gradio_api/info";
       const dot = document.getElementById("status-dot");
       const label = document.getElementById("status-label");
       const frame = document.getElementById("demo-frame");
       const fallback = document.getElementById("fallback");
-
-      async function checkUpstream() {
-        try {
-          const response = await fetch(upstreamInfo, {
-            method: "GET",
-            mode: "cors",
-            signal: AbortSignal.timeout(12000),
-          });
-          if (!response.ok) throw new Error(`HTTP ${response.status}`);
-          dot.classList.add("online");
-          label.textContent = "上游 Demo 在线";
-        } catch (error) {
+      let frameLoaded = false;
+
+      frame.addEventListener("load", () => {
+        frameLoaded = true;
+        dot.classList.add("online");
+        label.textContent = "上游 Demo 已加载";
+      });
+
+      frame.addEventListener("error", () => {
+        dot.classList.add("offline");
+        label.textContent = "上游暂不可用";
+        fallback.classList.add("visible");
+      });
+
+      window.setTimeout(() => {
+        if (!frameLoaded) {
           dot.classList.add("offline");
-          label.textContent = "上游正在休眠或暂不可用";
+          label.textContent = "上游加载超时";
           fallback.classList.add("visible");
         }
-      }
-
-      frame.addEventListener("error", () => fallback.classList.add("visible"));
-      checkUpstream();
+      }, 20000);
     </script>
   </body>
 </html>