Update app.py

app.py

@@ -14,10 +14,6 @@ from benchmark_selection import BenchmarkSelector, create_benchmark_selection_ui
 from evaluation_queue import EvaluationQueue, create_model_submission_ui
 from leaderboard import Leaderboard, create_leaderboard_ui
 from sample_benchmarks import add_sample_benchmarks
-from fastapi import FastAPI, Request, HTTPException
-from fastapi.responses import FileResponse, HTMLResponse
-from fastapi.staticfiles import StaticFiles
-from pydantic import BaseModel
 
 # Initialize components in main thread
 db = DynamicHighscoresDB()
@@ -102,8 +98,99 @@ button, input, textarea, select, option,
     background-color: rgba(250, 250, 250, 0.1);
     text-align: center;
 }
+
+/* Login button styling */
+.login-button {
+    background-color: #4CAF50 !important;
+    color: white !important;
+    font-weight: bold;
+}
+
+/* Force high contrast on specific input areas */
+input[type="text"], input[type="password"], textarea {
+    background-color: var(--background-fill-primary) !important;
+    color: var(--body-text-color) !important;
+}
+
+/* Force text visibility in multiple contexts */
+.gradio-markdown p, .gradio-markdown h1, .gradio-markdown h2, 
+.gradio-markdown h3, .gradio-markdown h4, .gradio-markdown li {
+    color: var(--body-text-color) !important;
+}
+
+/* Fix dark mode text visibility */
+@media (prefers-color-scheme: dark) {
+    input, textarea, select {
+        color: #ffffff !important;
+    }
+    
+    ::placeholder {
+        color: rgba(255, 255, 255, 0.5) !important;
+    }
+}
 """
 
+# JavaScript login implementation
+def js_login_script():
+    space_host = os.environ.get("SPACE_HOST", "localhost:7860")
+    redirect_uri = f"https://{space_host}"
+    
+    return f"""
+    <script src="https://unpkg.com/@huggingface/[email protected]/dist/index.umd.min.js"></script>
+    <script>
+    (async function() {{
+        const HfHub = window.HfHub;
+        try {{
+            // Check if we're returning from OAuth redirect
+            const oauthResult = await HfHub.oauthHandleRedirectIfPresent();
+            
+            if (oauthResult) {{
+                console.log("User logged in:", oauthResult);
+                
+                // Store the user info in localStorage
+                localStorage.setItem("hf_user", JSON.stringify(oauthResult.userInfo));
+                localStorage.setItem("hf_token", oauthResult.accessToken);
+                
+                // Update the UI to show logged in state
+                document.getElementById("login-status").textContent = "Logged in as: " + oauthResult.userInfo.name;
+                document.getElementById("login-button").style.display = "none";
+                
+                // Refresh the page to update server-side state
+                setTimeout(() => window.location.reload(), 1000);
+            }}
+        }} catch (error) {{
+            console.error("OAuth error:", error);
+        }}
+        
+        // Check if user is already logged in from localStorage
+        const storedUser = localStorage.getItem("hf_user");
+        if (storedUser) {{
+            try {{
+                const userInfo = JSON.parse(storedUser);
+                document.getElementById("login-status").textContent = "Logged in as: " + userInfo.name;
+                document.getElementById("login-button").style.display = "none";
+            }} catch (e) {{
+                console.error("Error parsing stored user:", e);
+            }}
+        }}
+        
+        // Setup login button
+        document.getElementById("login-button").addEventListener("click", async function() {{
+            try {{
+                const loginUrl = await HfHub.oauthLoginUrl({{
+                    redirectUrl: "{redirect_uri}",
+                    scopes: ["openid", "profile"]
+                }});
+                window.location.href = loginUrl;
+            }} catch (error) {{
+                console.error("Error generating login URL:", error);
+                alert("Error starting login process. Please try again.");
+            }}
+        }});
+    }})();
+    </script>
+    """
+
 # Simple manual authentication check
 def check_user(request: gr.Request):
     if request:
@@ -118,8 +205,8 @@ def check_user(request: gr.Request):
                 is_admin = (username == "Quazim0t0")
                 db.add_user(username, username, is_admin)
                 user = db.get_user_by_username(username)
-            return f"Logged in as: {username}"
-    return "Not logged in. Please <a href='/'>login</a> first."
+            return username
+    return None
 
 # Start evaluation queue worker
 def start_queue_worker():
@@ -133,9 +220,21 @@ def start_queue_worker():
 
 # Create Gradio app
 with gr.Blocks(css=css, title="Dynamic Highscores") as app:
-    # Display login status
+    # State to track user
+    user_state = gr.State(None)
+    
+    # Login section
     with gr.Row(elem_classes=["login-section"]):
-        login_status = gr.Markdown("Checking login status...")
+        with gr.Column():
+            gr.HTML("""
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div id="login-status">Not logged in</div>
+                <button id="login-button" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Login with HuggingFace</button>
+            </div>
+            """)
+    
+    # Add the JS login script
+    gr.HTML(js_login_script())
     
     gr.Markdown("# 🏆 Dynamic Highscores", elem_classes=["header"])
     gr.Markdown("""
@@ -172,232 +271,14 @@ with gr.Blocks(css=css, title="Dynamic Highscores") as app:
     app.load(
         fn=check_user,
         inputs=[],
-        outputs=[login_status]
+        outputs=[user_state]
     )
 
-# Create a FastAPI app to handle the static login page
-fastapi_app = FastAPI()
-
-# Make sure to create a static directory and put the login.html file there
-os.makedirs("static", exist_ok=True)
-
-# Save the login HTML to a file
-login_html_path = os.path.join("static", "login.html")
-if not os.path.exists(login_html_path):
-    with open(login_html_path, "w") as f:
-        f.write("""<!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");
-                } 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>""")
-
-# Create API endpoint for user registration
-class UserInfo(BaseModel):
-    username: str
-    token: str
-
-@fastapi_app.post("/api/register_user")
-async def register_user(userinfo: UserInfo):
-    try:
-        # Create user in database if they don't exist
-        user = db.get_user_by_username(userinfo.username)
-        if not user:
-            is_admin = (userinfo.username == "Quazim0t0")
-            db.add_user(userinfo.username, userinfo.username, is_admin)
-        return {"status": "success"}
-    except Exception as e:
-        raise HTTPException(status_code=500, detail=str(e))
-
-# Serve static files
-fastapi_app.mount("/static", StaticFiles(directory="static"), name="static")
-
-# Root path serves the login page
-@fastapi_app.get("/")
-async def serve_login_page():
-    return FileResponse("static/login.html")
-
-# App path serves the Gradio interface
-@fastapi_app.get("/app")
-async def serve_app():
-    # This will redirect to the Gradio interface
-    html_content = """
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <meta http-equiv="refresh" content="0;url=/gradio">
-        <title>Redirecting...</title>
-    </head>
-    <body>
-        Redirecting to Dynamic Highscores...
-    </body>
-    </html>
-    """
-    return HTMLResponse(content=html_content)
-
-# Mount Gradio app to FastAPI app
-app = gr.mount_gradio_app(fastapi_app, app, path="/gradio")
-
-# Start the queue worker
+# Launch the app
 if __name__ == "__main__":
+    # Start queue worker in a separate thread
     queue_thread = threading.Thread(target=start_queue_worker)
     queue_thread.daemon = True
-    queue_thread.start()
+    queue_thread.start()
+    
+    app.launch()