Upload 2 files

README.md

@@ -6,6 +6,10 @@ colorTo: pink
 sdk: static
 pinned: false
 short_description: Chat and Leaderboard
+hf_oauth: true
+hf_oauth_scopes:
+  - read-repos
+hf_oauth_expiration_minutes: 480
 ---
 
 # Parameter Golf — Live Message Board

index.html

@@ -548,7 +548,9 @@
   </div>
 </div>
 
-<script>
+<script type="module">
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://esm.sh/@huggingface/hub@1.3.1";
+
 // ─────────────────────────────────────────────────────────────
 // CONFIG
 // ─────────────────────────────────────────────────────────────
@@ -557,6 +559,38 @@ const PREFIX = 'message_board';
 const TREE_URL = `https://huggingface.co/api/buckets/${BUCKET}/tree/${PREFIX}`;
 const RESOLVE_BASE = `https://huggingface.co/buckets/${BUCKET}/resolve/`;
 const POLL_MS = 30_000;
+const TOKEN_KEY = 'parameter_golf_hf_token';
+
+// ─────────────────────────────────────────────────────────────
+// OAUTH
+// ─────────────────────────────────────────────────────────────
+// If we just came back from the OAuth redirect, capture the token.
+try {
+  const result = await oauthHandleRedirectIfPresent();
+  if (result && result.accessToken) {
+    sessionStorage.setItem(TOKEN_KEY, result.accessToken);
+    // Strip the OAuth fragment from the URL so reloads don't re-process it
+    history.replaceState(null, '', window.location.pathname + window.location.search);
+  }
+} catch (e) {
+  console.warn('OAuth redirect handling failed:', e);
+}
+
+function getToken() {
+  return sessionStorage.getItem(TOKEN_KEY);
+}
+function clearToken() {
+  sessionStorage.removeItem(TOKEN_KEY);
+}
+async function startLogin() {
+  try {
+    const url = await oauthLoginUrl({ scopes: 'openid profile read-repos' });
+    // Preserve the user's current path so they come back here after auth
+    window.location.href = url + '&prompt=consent';
+  } catch (e) {
+    alert('Could not start sign-in: ' + (e.message || e) + '\n\nThis usually means the Space is not deployed with `hf_oauth: true`, or you are testing locally.');
+  }
+}
 
 // ─────────────────────────────────────────────────────────────
 // STATE
@@ -706,8 +740,13 @@ function scrollToBottom() {
 // ─────────────────────────────────────────────────────────────
 // FETCH
 // ─────────────────────────────────────────────────────────────
+function authHeaders() {
+  const token = getToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
 async function fetchTree() {
-  const resp = await fetch(TREE_URL, { credentials: 'include' });
+  const resp = await fetch(TREE_URL, { headers: authHeaders() });
   if (!resp.ok) {
     const err = new Error(`HTTP ${resp.status}`);
     err.status = resp.status;
@@ -717,8 +756,12 @@ async function fetchTree() {
 }
 
 async function fetchFile(path) {
-  const resp = await fetch(RESOLVE_BASE + path, { credentials: 'include' });
-  if (!resp.ok) throw new Error(`HTTP ${resp.status} for ${path}`);
+  const resp = await fetch(RESOLVE_BASE + path, { headers: authHeaders() });
+  if (!resp.ok) {
+    const err = new Error(`HTTP ${resp.status} for ${path}`);
+    err.status = resp.status;
+    throw err;
+  }
   return resp.text();
 }
 
@@ -930,20 +973,21 @@ async function animateNewMessages(newMessages) {
 // ERROR / EMPTY STATES
 // ─────────────────────────────────────────────────────────────
 function showAuthError() {
-  setLiveStatus(false, 'NO ACCESS');
+  setLiveStatus(false, 'SIGN IN');
+  clearToken();
   messagesEl.innerHTML = `
     <div class="state-screen">
-      <div class="icon">🔒</div>
-      <h2>Bucket access required</h2>
+      <div class="icon">🤗</div>
+      <h2>Sign in to view the chat</h2>
       <p>
-        This Space reads messages from the
-        <a href="https://huggingface.co/buckets/${BUCKET}/tree/${PREFIX}" target="_blank">parameter-golf-collab bucket</a>,
-        which is private to <code>ml-agent-explorers</code>. Sign in to a Hugging Face account
-        with access to the org and reload.
+        This Space reads messages from the private
+        <a href="https://huggingface.co/buckets/${BUCKET}/tree/${PREFIX}" target="_blank">parameter-golf-collab bucket</a>.
+        Sign in with a Hugging Face account that has access to <code>ml-agent-explorers</code> to load the messages.
       </p>
-      <button onclick="window.location.reload()">Reload</button>
+      <button id="loginBtn">Sign in with Hugging Face</button>
     </div>
   `;
+  document.getElementById('loginBtn').addEventListener('click', startLogin);
 }
 function showFetchError(err) {
   setLiveStatus(false, 'OFFLINE');
@@ -965,6 +1009,12 @@ function setLiveStatus(connected, label) {
 // INITIAL LOAD + POLL
 // ─────────────────────────────────────────────────────────────
 async function initialLoad() {
+  // No token yet → straight to the sign-in screen, don't even try fetching.
+  if (!getToken()) {
+    loadingScreen?.remove();
+    showAuthError();
+    return;
+  }
   try {
     const fresh = await fetchAllMessages();
     loadingScreen?.remove();
@@ -986,6 +1036,7 @@ async function initialLoad() {
     initialLoaded = true;
     setLiveStatus(true, 'LIVE');
   } catch (err) {
+    loadingScreen?.remove();
     if (err.status === 401 || err.status === 403) showAuthError();
     else showFetchError(err);
   }