Upload index.html with huggingface_hub

index.html

@@ -5,6 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ellamind base-eval</title>
   <script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
+  <script type="importmap">
+  {
+    "imports": {
+      "@huggingface/hub": "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.21.0/+esm"
+    }
+  }
+  </script>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
@@ -343,11 +350,36 @@
       width: 420px;
       max-width: 60vw;
     }
-    .merge-dataset-row input[type="text"]:focus {
+    .merge-dataset-row input[type="text"]:focus,
+    .hf-auth-row input[type="password"]:focus {
       outline: none;
       border-color: #4361ee;
       box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
     }
+    .hf-auth-row input[type="password"] {
+      padding: 6px 10px;
+      border: 1px solid #dee2e6;
+      border-radius: 6px;
+      font-size: 0.8rem;
+      color: #1a1a2e;
+      width: 420px;
+      max-width: 50vw;
+    }
+    .hf-auth-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .hf-auth-row .hf-user {
+      font-size: 0.8rem;
+      color: #495057;
+    }
+    .hf-signin-img {
+      cursor: pointer;
+      height: 28px;
+    }
     .merge-dataset-row .merge-status {
       font-size: 0.75rem;
       color: #6c757d;
@@ -409,6 +441,12 @@
 
   <div id="init-loading">Initializing DuckDB...</div>
 
+  <div class="hf-auth-row" id="hf-auth-row" style="display:none">
+    <img id="hf-signin-btn" class="hf-signin-img" src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-sm-dark.svg" alt="Sign in with Hugging Face" style="display:none">
+    <span id="hf-user" class="hf-user" style="display:none"></span>
+    <button class="btn btn-sm" id="hf-signout-btn" style="display:none">Sign out</button>
+    <input type="password" id="hf-token-input" placeholder="HF token (for private datasets)" style="display:none">
+  </div>
   <div class="merge-dataset-row" id="merge-dataset-row" style="display:none">
     <input type="text" id="merge-dataset-input" placeholder="HF dataset path, e.g. org/dataset-name or org/dataset-name/file.parquet">
     <button class="btn btn-primary btn-sm" id="btn-merge-dataset">Merge Dataset</button>
@@ -426,8 +464,10 @@
   <script type="module">
     import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.29.0/+esm';
     import jsyaml from 'https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/+esm';
+    import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
 
     // ── Globals ─────────────────────────────────────────────────
+    let hfAccessToken = null;  // set by OAuth or manual input
     let db = null;
     let conn = null;
     let panelCounter = 0;
@@ -1781,7 +1821,12 @@
         const id = mergeCounter++;
         const bufferName = `merged_${id}.parquet`;
 
-        const response = await fetch(url);
+        const fetchOpts = {};
+        const token = hfAccessToken || document.getElementById('hf-token-input').value.trim();
+        if (token) {
+          fetchOpts.headers = { 'Authorization': `Bearer ${token}` };
+        }
+        const response = await fetch(url, fetchOpts);
         if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         const buffer = new Uint8Array(await response.arrayBuffer());
         await db.registerFileBuffer(bufferName, buffer);
@@ -1858,6 +1903,69 @@
       }
     }
 
+    // ── HF Auth ───────────────────────────────────────────────
+    function updateAuthUI(oauthResult) {
+      const authRow = document.getElementById('hf-auth-row');
+      const signinBtn = document.getElementById('hf-signin-btn');
+      const signoutBtn = document.getElementById('hf-signout-btn');
+      const userEl = document.getElementById('hf-user');
+      const tokenInput = document.getElementById('hf-token-input');
+
+      authRow.style.display = '';
+
+      if (!window.huggingface?.variables?.OAUTH_CLIENT_ID) {
+        // Not on HF Spaces — hide auth entirely
+        authRow.style.display = 'none';
+        return;
+      }
+
+      authRow.style.display = '';
+      if (oauthResult) {
+        signinBtn.style.display = 'none';
+        tokenInput.style.display = 'none';
+        userEl.textContent = `Signed in as ${oauthResult.userInfo?.name || oauthResult.userInfo?.preferred_username || 'HF user'}`;
+        userEl.style.display = '';
+        signoutBtn.style.display = '';
+      } else {
+        signinBtn.style.display = '';
+        tokenInput.style.display = 'none';
+        userEl.style.display = 'none';
+        signoutBtn.style.display = 'none';
+      }
+    }
+
+    async function initHfAuth() {
+      // Try restoring from localStorage
+      let oauthResult = null;
+      const stored = localStorage.getItem('hf_oauth');
+      if (stored) {
+        try { oauthResult = JSON.parse(stored); } catch { oauthResult = null; }
+      }
+
+      // Handle OAuth redirect (takes priority over stored)
+      oauthResult = (await oauthHandleRedirectIfPresent()) || oauthResult;
+
+      if (oauthResult?.accessToken) {
+        hfAccessToken = oauthResult.accessToken;
+        localStorage.setItem('hf_oauth', JSON.stringify(oauthResult));
+      }
+
+      updateAuthUI(oauthResult);
+
+      // Sign in
+      document.getElementById('hf-signin-btn').addEventListener('click', async () => {
+        const scopes = window.huggingface?.variables?.OAUTH_SCOPES || 'openid profile read-repos';
+        window.location.href = (await oauthLoginUrl({ scopes })) + '&prompt=consent';
+      });
+
+      // Sign out
+      document.getElementById('hf-signout-btn').addEventListener('click', () => {
+        localStorage.removeItem('hf_oauth');
+        hfAccessToken = null;
+        updateAuthUI(null);
+      });
+    }
+
     // ── Init ────────────────────────────────────────────────────
     const elInitLoading = document.getElementById('init-loading');
     const elAddPanelRow = document.getElementById('add-panel-row');
@@ -1880,6 +1988,9 @@
         elAddPanelRow.style.display = '';
         document.getElementById('merge-dataset-row').style.display = '';
 
+        // ── HF Auth setup ──
+        await initHfAuth();
+
         // Create default panel
         await addPanel({ suite: 'eng_base_main', metric: 'acc_norm' });
       } catch (err) {