Spaces:

jejunepixels
/

noexit

Running

ckonteos80 commited on 24 days ago

Commit

fe6fbbd

1 Parent(s): 230c39c

Add status panel and HuggingFace polling

Introduce a status panel to index.html that displays initialization state for backend Spaces (Chat Engine and Memory Extractor). Adds CSS for the panel, status rows/dots and disabled play-button styling. Replaces the direct Enter link with a disabled Enter button that is enabled once both Spaces report RUNNING. Implements JS polling: queries the Hugging Face Spaces API for runtime.stage, triggers no-cors wake requests, falls back to direct pings after repeated Hub API failures, and updates visual states (waking, ready, error) accordingly.

Files changed (1) hide show

index.html +188 -1

index.html CHANGED Viewed

@@ -163,6 +163,84 @@
                 font-size: 1.2em;
             }
         }
     </style>
 </head>
 <body>
@@ -187,10 +265,119 @@
                 </ul>
             </div>
-            <a href="./game/index.html" class="play-button">Enter</a>
             <div class="quote">"L'enfer, c'est les autres" — Jean-Paul Sartre</div>
         </div>
     </div>
 </body>
 </html>

                 font-size: 1.2em;
             }
         }
+        .status-panel {
+            margin: 35px auto 0;
+            max-width: 480px;
+            border: 1px solid rgba(212, 175, 55, 0.2);
+            border-radius: 6px;
+            padding: 18px 24px;
+            background: rgba(0, 0, 0, 0.4);
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+        }
+        .status-panel-title {
+            font-size: 0.8em;
+            color: #777;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            margin-bottom: 14px;
+        }
+        .status-row {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 9px 0;
+        }
+        .status-row + .status-row {
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            flex-shrink: 0;
+            background: #444;
+            transition: background 0.4s ease, box-shadow 0.4s ease;
+        }
+        .status-dot.waking {
+            background: #D4AF37;
+            box-shadow: 0 0 7px rgba(212, 175, 55, 0.7);
+            animation: hf-pulse 1.3s ease-in-out infinite;
+        }
+        .status-dot.ready {
+            background: #4caf50;
+            box-shadow: 0 0 7px rgba(76, 175, 80, 0.7);
+        }
+        .status-dot.error { background: #c0392b; }
+        @keyframes hf-pulse {
+            0%, 100% { opacity: 1; }
+            50%       { opacity: 0.35; }
+        }
+        .status-label {
+            flex: 1;
+            font-size: 1.05em;
+            color: #c8c8c8;
+        }
+        .status-text {
+            font-size: 0.85em;
+            color: #666;
+            transition: color 0.4s ease;
+        }
+        .status-text.ready { color: #4caf50; }
+        .status-text.error { color: #c0392b; }
+        .play-button.disabled {
+            opacity: 0.35;
+            cursor: not-allowed;
+            pointer-events: none;
+            box-shadow: none;
+        }
     </style>
 </head>
 <body>
                 </ul>
             </div>
+            <div class="status-panel">
+                <div class="status-panel-title">Initializing Systems</div>
+                <div class="status-row">
+                    <div class="status-dot" id="dot-chat"></div>
+                    <span class="status-label">Chat Engine</span>
+                    <span class="status-text" id="status-chat">Checking…</span>
+                </div>
+                <div class="status-row">
+                    <div class="status-dot" id="dot-memory"></div>
+                    <span class="status-label">Memory Extractor</span>
+                    <span class="status-text" id="status-memory">Checking…</span>
+                </div>
+            </div>
+            <a href="./game/index.html" class="play-button disabled" id="enter-btn">Enter</a>
             <div class="quote">"L'enfer, c'est les autres" — Jean-Paul Sartre</div>
         </div>
     </div>
+    <script>
+        const SPACES = [
+            {
+                id: 'chat',
+                owner: 'jejunepixels',
+                repo: 'noexit-proxy',
+                wakeUrl: 'https://jejunepixels-noexit-proxy.hf.space',
+                ready: false
+            },
+            {
+                id: 'memory',
+                owner: 'jejunepixels',
+                repo: 'qwen3-0-6b-info-extractor-api',
+                wakeUrl: 'https://jejunepixels-qwen3-0-6b-info-extractor-api.hf.space/extract',
+                ready: false
+            }
+        ];
+        function setStatus(space, state, text) {
+            space.dotEl.className = 'status-dot ' + state;
+            space.statusEl.textContent = text;
+            space.statusEl.className = 'status-text' +
+                (state === 'ready' ? ' ready' : state === 'error' ? ' error' : '');
+        }
+        function checkAllReady(enterBtn, titleEl) {
+            if (SPACES.every(s => s.ready)) {
+                enterBtn.classList.remove('disabled');
+                titleEl.textContent = 'Systems Ready';
+            }
+        }
+        async function pollSpace(space, enterBtn, titleEl) {
+            const apiUrl = 'https://huggingface.co/api/spaces/' + space.owner + '/' + space.repo;
+            let hubFailCount = 0;
+            while (true) {
+                // After 2 Hub API failures, fall back to direct ping
+                if (hubFailCount < 2) {
+                    try {
+                        const res = await fetch(apiUrl);
+                        if (!res.ok) throw new Error('HTTP ' + res.status);
+                        const data = await res.json();
+                        const stage = data && data.runtime && data.runtime.stage;
+                        hubFailCount = 0;
+                        if (stage === 'RUNNING') {
+                            setStatus(space, 'ready', 'Ready');
+                            space.ready = true;
+                            checkAllReady(enterBtn, titleEl);
+                            return;
+                        } else if (stage === 'SLEEPING' || stage === 'PAUSED') {
+                            setStatus(space, 'waking', 'Waking up…');
+                            fetch(space.wakeUrl, { mode: 'no-cors' }).catch(function() {});
+                        } else if (stage === 'BUILDING' || stage === 'APP_STARTING') {
+                            setStatus(space, 'waking', 'Starting up…');
+                        } else if (stage === 'STOPPED') {
+                            setStatus(space, 'error', 'Unavailable');
+                            return;
+                        } else {
+                            setStatus(space, 'waking', 'Initializing…');
+                        }
+                    } catch (e) {
+                        hubFailCount++;
+                        setStatus(space, 'waking', 'Waking up…');
+                    }
+                } else {
+                    // Direct no-cors ping — resolves if server is reachable, throws if truly down
+                    try {
+                        setStatus(space, 'waking', 'Waking up…');
+                        fetch(space.wakeUrl, { mode: 'no-cors' }).catch(function() {});
+                        await fetch(space.wakeUrl, { mode: 'no-cors' });
+                        setStatus(space, 'ready', 'Ready');
+                        space.ready = true;
+                        checkAllReady(enterBtn, titleEl);
+                        return;
+                    } catch (e) {
+                        setStatus(space, 'waking', 'Waking up…');
+                    }
+                }
+                await new Promise(function(r) { setTimeout(r, 5000); });
+            }
+        }
+        document.addEventListener('DOMContentLoaded', function() {
+            var enterBtn = document.getElementById('enter-btn');
+            var titleEl  = document.querySelector('.status-panel-title');
+            SPACES.forEach(function(space) {
+                space.dotEl   = document.getElementById('dot-'    + space.id);
+                space.statusEl = document.getElementById('status-' + space.id);
+                pollSpace(space, enterBtn, titleEl);
+            });
+        });
+    </script>
 </body>
 </html>