up.

index.html

@@ -106,7 +106,8 @@
         </div>
     </div>
 
-    <script>
+    <script type="module">
+        import { oauthLoginUrl, oauthHandleRedirectIfPresent } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm';
         // DOM Elements
         const loginBtn = document.getElementById('login-btn');
         const logoutBtn = document.getElementById('logout-btn');
@@ -128,8 +129,9 @@
         let messageCount = 0;
         
         // Initialize
-        document.addEventListener('DOMContentLoaded', () => {
-            checkAuth();
+        document.addEventListener('DOMContentLoaded', async () => {
+            await processRedirect();
+            await checkAuth();
             messageInput.disabled = false; // Always enable input
         });
         
@@ -182,37 +184,12 @@
         
         async function handleLogin() {
             try {
-                const token = prompt("Enter your Hugging Face API token (get it from https://huggingface.co/settings/tokens):");
-                if (!token) return;
-                
-                // Test the token with a lightweight request
-                const testClient = new hf.Inference(token);
-                const response = await fetch('https://huggingface.co/api/whoami-v2', {
-                    headers: {
-                        'Authorization': `Bearer ${token}`
-                    }
-                });
-                
-                if (!response.ok) {
-                    throw new Error('Invalid token');
-                }
-                
-                const userData = await response.json();
-                const user = {
-                    name: userData.name || 'Hugging Face User',
-                    avatar: userData.avatarUrl || 'https://huggingface.co/front/assets/huggingface_logo-noborder.svg'
-                };
-                
-                localStorage.setItem('hf_token', token);
-                localStorage.setItem('hf_user', JSON.stringify(user));
-                currentUser = user;
-                hfClient = testClient;
-                setupAuthenticatedUI();
-                
-                addMessage('assistant', `Hello ${user.name}! How can I help you today?`);
+                // Redirect user to Hugging Face OAuth page
+                const url = await oauthLoginUrl();
+                window.location.href = url;
             } catch (error) {
-                console.error("Login error:", error);
-                alert(`Login failed: ${error.message}. Please check your token and try again.`);
+                console.error("Login redirect error:", error);
+                alert(`Unable to redirect to Hugging Face login: ${error.message}`);
             }
         }
         
@@ -370,6 +347,30 @@
             return messages;
         }
         
+        // Handle OAuth redirect result
+        async function processRedirect() {
+            try {
+                const oauthResult = await oauthHandleRedirectIfPresent();
+                if (oauthResult) {
+                    const token = oauthResult.accessToken;
+                    const info = oauthResult.userInfo || {};
+                    const user = {
+                        name: info.name || info.preferred_username || 'Hugging Face User',
+                        avatar: info.picture || 'https://huggingface.co/front/assets/huggingface_logo-noborder.svg'
+                    };
+                    localStorage.setItem('hf_token', token);
+                    localStorage.setItem('hf_user', JSON.stringify(user));
+                    currentUser = user;
+                    hfClient = new hf.Inference(token);
+                    setupAuthenticatedUI();
+                    if (messageCount === 0) {
+                        addMessage('assistant', `Hello ${user.name}! How can I help you today?`);
+                    }
+                }
+            } catch (err) {
+                console.error('OAuth processing failed:', err);
+            }
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=reach-vb/hugging-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>