Upload folder using huggingface_hub

README.md

@@ -8,6 +8,11 @@ sdk_version: 6.14.0
 python_version: '3.11'
 app_file: app.py
 pinned: false
+hf_oauth: true
+hf_oauth_scopes:
+  - read-repos
+  - write-repos
+  - manage-repos
 ---
 
 ## SoniCoder

code/server/routes.py

@@ -10,6 +10,7 @@ Defines all HTTP and API endpoints:
 - API push_hf      → push to HuggingFace Hub
 - API switch_model → switch between loaded models
 - API upload_image → upload image for VLM inference
+- API hf_auth      → get HF OAuth profile & organizations
 """
 
 from __future__ import annotations
@@ -470,6 +471,84 @@ def handle_chat(
     })
 
 
+@app.api(name="hf_auth", concurrency_limit=4)
+def handle_hf_auth(
+    oauth_token: str = "",
+) -> str:
+    """Get HuggingFace OAuth profile and list of organizations.
+
+    If oauth_token is provided (from Gradio OAuth), uses it to fetch user info.
+    Otherwise, returns empty auth info.
+    """
+    try:
+        import gradio as gr
+        from huggingface_hub import whoami
+
+        token = oauth_token.strip() if oauth_token else ""
+
+        if not token:
+            yield json.dumps({
+                "authenticated": False,
+                "username": "",
+                "name": "",
+                "picture": "",
+                "organizations": [],
+                "message": "Not signed in. Click Sign In to authenticate with HuggingFace.",
+            })
+            return
+
+        # Get user info using the OAuth token
+        user_info = whoami(token=token)
+        username = user_info.get("name", "")
+        fullname = user_info.get("fullname", username)
+
+        # Get avatar
+        avatar_url = ""
+        avatar_info = user_info.get("avatarUrl", "")
+        if avatar_info:
+            avatar_url = avatar_info
+
+        # Get organizations
+        orgs = []
+        for org in user_info.get("orgs", []):
+            orgs.append({
+                "name": org.get("name", ""),
+                "avatar": org.get("avatarUrl", ""),
+            })
+
+        # Also check orgRoles for role info
+        org_roles = user_info.get("orgRoles", [])
+        for role_info in org_roles:
+            org_name = role_info.get("org", "")
+            role = role_info.get("role", "member")
+            # Add role info to existing org if found
+            for org in orgs:
+                if org["name"] == org_name:
+                    org["role"] = role
+                    break
+
+        yield json.dumps({
+            "authenticated": True,
+            "username": username,
+            "name": fullname,
+            "picture": avatar_url,
+            "organizations": orgs,
+            "token": token,
+            "message": f"Signed in as {username}",
+        })
+
+    except Exception as exc:
+        logger.exception("HF auth check failed")
+        yield json.dumps({
+            "authenticated": False,
+            "username": "",
+            "name": "",
+            "picture": "",
+            "organizations": [],
+            "message": f"Auth check failed: {str(exc)}",
+        })
+
+
 @app.api(name="push_hf", concurrency_limit=1)
 def handle_push_hf(
     exec_context_json: str,

index.html

@@ -943,6 +943,36 @@ body.hide-thinking .think-block { display: none; }
   cursor: not-allowed;
 }
 
+#btn-hf-login {
+  background: linear-gradient(135deg, #FFD21E, #FF9D00);
+  border: none;
+  color: #1a1a1a;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 0.5px;
+}
+#btn-hf-login:hover {
+  box-shadow: 0 0 12px rgba(255,210,30,0.5);
+  transform: translateY(-1px);
+}
+
+#hf-owner {
+  width: 100%;
+  background: var(--bg-code);
+  color: var(--gray-light);
+  border: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+
 .deploy-status {
   margin-top: 10px;
   padding: 8px 12px;
@@ -1189,16 +1219,42 @@ body.hide-thinking .think-block { display: none; }
         <div class="tab-pane" id="pane-deploy">
           <div class="deploy-section">
             <div class="deploy-title">&#128640; Deploy to HuggingFace</div>
+
+            <!-- OAuth Login Section -->
+            <div class="deploy-field" id="hf-auth-section">
+              <label>Sign In</label>
+              <div id="hf-auth-container">
+                <button id="btn-hf-login" onclick="loginWithHF()">&#129309; Sign in with HuggingFace</button>
+                <div id="hf-user-info" style="display:none;">
+                  <img id="hf-user-avatar" src="" alt="" style="width:24px;height:24px;border-radius:50%;vertical-align:middle;margin-right:6px;">
+                  <span id="hf-user-name" style="color:var(--green);font-weight:600;"></span>
+                  <button id="btn-hf-logout" onclick="logoutHF()" style="margin-left:8px;font-size:10px;color:var(--red);background:none;border:none;cursor:pointer;">Sign out</button>
+                </div>
+              </div>
+              <div class="deploy-hint" id="hf-auth-hint">Sign in with OAuth — no token paste needed</div>
+            </div>
+
+            <!-- Push to: User or Org selector -->
             <div class="deploy-field">
-              <label for="hf-repo-name">Repository Name</label>
-              <input type="text" id="hf-repo-name" placeholder="username/my-app" autocomplete="off">
-              <div class="deploy-hint">Format: username/repo-name or just repo-name</div>
+              <label for="hf-owner">Push to</label>
+              <select id="hf-owner">
+                <option value="">Sign in to see options</option>
+              </select>
+              <div class="deploy-hint">Select your account or an organization</div>
             </div>
+
             <div class="deploy-field">
-              <label for="hf-token">HuggingFace Token</label>
+              <label for="hf-repo-name">Repository Name</label>
+              <input type="text" id="hf-repo-name" placeholder="my-app" autocomplete="off">
+              <div class="deploy-hint">The repo will be created at owner/repo-name</div>
+            </div>
+
+            <div class="deploy-field" id="hf-manual-token-section">
+              <label for="hf-token">HuggingFace Token <span style="font-weight:400;color:var(--gray-dim);">(manual fallback)</span></label>
               <input type="password" id="hf-token" placeholder="hf_xxxxxxxxxxxxxxxxxxxxx" autocomplete="off">
-              <div class="deploy-hint">Get your token at <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a></div>
+              <div class="deploy-hint">Only needed if OAuth is unavailable. <a href="https://huggingface.co/settings/tokens" target="_blank">Get token</a></div>
             </div>
+
             <div class="deploy-field">
               <label for="hf-space-sdk">Space SDK</label>
               <select id="hf-space-sdk">
@@ -1321,6 +1377,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Poll model status
   pollModelStatus();
+
+  // Check for HuggingFace OAuth session
+  checkGradioOAuth();
 });
 
 function autoResize() {
@@ -2435,23 +2494,155 @@ function toggleSearchPanel(badge) {
 }
 
 // ═══════════════════════════════════════════════════════
-// HUGGINGFACE PUSH
+// HUGGINGFACE OAUTH + PUSH
 // ═══════════════════════════════════════════════════════
+
+// OAuth state
+state.hfAuth = {
+  authenticated: false,
+  token: '',
+  username: '',
+  name: '',
+  picture: '',
+  organizations: [],
+};
+
+async function loginWithHF() {
+  // On HuggingFace Spaces, Gradio handles OAuth via /login/huggingface
+  // We redirect to the Gradio OAuth endpoint
+  const currentUrl = window.location.href;
+  const loginUrl = `/login/huggingface?callback_url=${encodeURIComponent(currentUrl)}`;
+  window.location.href = loginUrl;
+}
+
+function logoutHF() {
+  state.hfAuth = {
+    authenticated: false,
+    token: '',
+    username: '',
+    name: '',
+    picture: '',
+    organizations: [],
+  };
+  // Update UI
+  document.getElementById('btn-hf-login').style.display = '';
+  document.getElementById('hf-user-info').style.display = 'none';
+  document.getElementById('hf-manual-token-section').style.display = '';
+  document.getElementById('hf-auth-hint').textContent = 'Sign in with OAuth — no token paste needed';
+  // Reset owner dropdown
+  const ownerSelect = document.getElementById('hf-owner');
+  ownerSelect.innerHTML = '<option value="">Sign in to see options</option>';
+  // Check for Gradio OAuth token in session
+  checkGradioOAuth();
+}
+
+async function checkGradioOAuth() {
+  // Try to get the OAuth token from Gradio's session
+  // Gradio stores the token in cookies/session after OAuth login
+  try {
+    // Check if we have a Gradio session with OAuth token
+    const resp = await fetch('/gradio_api/call/hf_auth', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ data: [''] })
+    });
+
+    if (!resp.ok) return;
+
+    const { event_id } = await resp.json();
+    const eventSource = new EventSource(`/gradio_api/call/hf_auth/${event_id}`);
+
+    eventSource.addEventListener('complete', (e) => {
+      try {
+        const dataArray = JSON.parse(e.data);
+        const result = JSON.parse(dataArray[0]);
+        if (result.authenticated) {
+          handleAuthResult(result);
+        }
+      } catch (err) { /* not authenticated */ }
+      eventSource.close();
+    });
+
+    eventSource.addEventListener('error', () => { eventSource.close(); });
+  } catch (err) {
+    // OAuth not available — show manual token input
+  }
+}
+
+function handleAuthResult(result) {
+  state.hfAuth = {
+    authenticated: result.authenticated,
+    token: result.token || '',
+    username: result.username || '',
+    name: result.name || '',
+    picture: result.picture || '',
+    organizations: result.organizations || [],
+  };
+
+  if (result.authenticated) {
+    // Update UI — show user info
+    document.getElementById('btn-hf-login').style.display = 'none';
+    document.getElementById('hf-user-info').style.display = '';
+    document.getElementById('hf-user-name').textContent = result.name || result.username;
+    if (result.picture) {
+      document.getElementById('hf-user-avatar').src = result.picture;
+      document.getElementById('hf-user-avatar').style.display = '';
+    } else {
+      document.getElementById('hf-user-avatar').style.display = 'none';
+    }
+    document.getElementById('hf-auth-hint').textContent = `Signed in as ${result.username}`;
+    document.getElementById('hf-manual-token-section').style.display = 'none';
+
+    // Populate owner dropdown
+    const ownerSelect = document.getElementById('hf-owner');
+    ownerSelect.innerHTML = '';
+
+    // Add user as first option
+    const userOpt = document.createElement('option');
+    userOpt.value = result.username;
+    userOpt.textContent = `${result.username} (you)`;
+    ownerSelect.appendChild(userOpt);
+
+    // Add organizations
+    if (result.organizations && result.organizations.length > 0) {
+      result.organizations.forEach(org => {
+        const opt = document.createElement('option');
+        opt.value = org.name;
+        const roleSuffix = org.role ? ` (${org.role})` : '';
+        opt.textContent = `${org.name}${roleSuffix}`;
+        ownerSelect.appendChild(opt);
+      });
+    }
+
+    // Auto-fill token in hidden field for push
+    document.getElementById('hf-token').value = result.token;
+  }
+}
+
 async function pushToHuggingFace() {
+  const ownerSelect = document.getElementById('hf-owner');
+  const owner = ownerSelect.value;
   const repoName = document.getElementById('hf-repo-name').value.trim();
   const hfToken = document.getElementById('hf-token').value.trim();
   const spaceSdk = document.getElementById('hf-space-sdk').value;
   const statusEl = document.getElementById('deploy-status');
 
-  if (!repoName) {
+  // Build full repo name
+  let fullRepoName = repoName;
+  if (owner && repoName && !repoName.includes('/')) {
+    fullRepoName = `${owner}/${repoName}`;
+  }
+
+  if (!fullRepoName) {
     statusEl.className = 'deploy-status error';
     statusEl.textContent = 'Please enter a repository name.';
     statusEl.style.display = 'block';
     return;
   }
+
   if (!hfToken) {
     statusEl.className = 'deploy-status error';
-    statusEl.textContent = 'Please enter your HuggingFace token.';
+    statusEl.textContent = 'Please sign in with HuggingFace or enter a token.';
     statusEl.style.display = 'block';
     return;
   }
@@ -2477,7 +2668,7 @@ async function pushToHuggingFace() {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-        data: [execContextJSON, repoName, hfToken, spaceSdk, 'true']
+        data: [execContextJSON, fullRepoName, hfToken, spaceSdk, 'true']
       })
     });