qLeaderboard-aBase4Community

Running

App Files Files Community

Quazim0t0 commited on Mar 21

Commit

189379e

verified ·

1 Parent(s): e73561d

Create login.html

Browse files

Files changed (1) hide show

	@@ -0,0 +1,180 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Dynamic Highscores Login</title>
+    <script src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+    <script type="importmap">
+        {
+            "imports": {
+                "@huggingface/hub": "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm"
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            background-color: #f5f5f5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            padding: 20px;
+        }
+        .card {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            padding: 30px;
+            max-width: 500px;
+            width: 100%;
+            text-align: center;
+        }
+        h1 {
+            color: #333;
+            margin-top: 0;
+        }
+        .signin-btn {
+            cursor: pointer;
+            display: block;
+            margin: 20px auto;
+            transition: transform 0.3s ease;
+        }
+        .signin-btn:hover {
+            transform: scale(1.05);
+        }
+        .hidden {
+            display: none;
+        }
+        #status {
+            margin-top: 20px;
+            padding: 10px;
+            border-radius: 4px;
+        }
+        .success {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        .loading {
+            background-color: #fff3cd;
+            color: #856404;
+        }
+        a.button {
+            display: inline-block;
+            background-color: #3498db;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 4px;
+            text-decoration: none;
+            font-weight: bold;
+            margin-top: 20px;
+        }
+        a.button:hover {
+            background-color: #2980b9;
+        }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <h1>Dynamic Highscores</h1>
+        <p>Sign in with your HuggingFace account to submit models and benchmarks.</p>
+        <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg"
+             alt="Sign in with Hugging Face"
+             class="signin-btn"
+             id="signin">
+        <div id="status" class="hidden"></div>
+        <a href="/app" class="button hidden" id="continue-btn">Continue to Dynamic Highscores</a>
+    </div>
+    <script type="module">
+        import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
+        const statusElement = document.getElementById("status");
+        const signinButton = document.getElementById("signin");
+        const continueButton = document.getElementById("continue-btn");
+        // Function to show status message
+        function showStatus(message, type) {
+            statusElement.textContent = message;
+            statusElement.className = type;
+            statusElement.classList.remove("hidden");
+        }
+        // Check if we're returning from OAuth redirect
+        async function checkLogin() {
+            try {
+                showStatus("Checking login status...", "loading");
+                // Check if we already have OAuth data in localStorage
+                let oauthResult = localStorage.getItem("oauth");
+                if (oauthResult) {
+                    try {
+                        oauthResult = JSON.parse(oauthResult);
+                    } catch {
+                        oauthResult = null;
+                    }
+                }
+                // If not, check if we're returning from a redirect
+                if (!oauthResult) {
+                    oauthResult = await oauthHandleRedirectIfPresent();
+                }
+                // If we have OAuth data, we're logged in
+                if (oauthResult) {
+                    localStorage.setItem("oauth", JSON.stringify(oauthResult));
+                    signinButton.classList.add("hidden");
+                    showStatus(`Logged in as ${oauthResult.userInfo.name}`, "success");
+                    continueButton.classList.remove("hidden");
+                    // Send user info to backend
+                    try {
+                        await fetch("/api/register_user", {
+                            method: "POST",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            body: JSON.stringify({
+                                username: oauthResult.userInfo.name,
+                                token: oauthResult.accessToken
+                            }),
+                        });
+                    } catch (error) {
+                        console.error("Error registering user:", error);
+                    }
+                } else {
+                    statusElement.classList.add("hidden");
+                    signinButton.classList.remove("hidden");
+                }
+            } catch (error) {
+                console.error("Error checking login:", error);
+                showStatus("Error checking login status", "error");
+            }
+        }
+        // Setup sign in button
+        signinButton.addEventListener("click", async () => {
+            try {
+                showStatus("Redirecting to HuggingFace login...", "loading");
+                window.location.href = await oauthLoginUrl({
+                    redirectUrl: window.location.href,
+                    scopes: ["openid", "profile"]
+                });
+            } catch (error) {
+                console.error("Error generating login URL:", error);
+                showStatus("Error starting login process", "error");
+            }
+        });
+        // Check login status when page loads
+        checkLogin();
+    </script>
+</body>
+</html>