UI Upgrade: Broadened Google Auth button and renamed models to academic research titles (Distilled Knowledge Transfer and Recursive Cognitive Reasoning). Improved Google Login logic.

database.py

@@ -121,6 +121,19 @@ def increment_gemini_limit(username):
     conn.commit()
     conn.close()
 
+def login_or_create_google_user(username):
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    # Check if user exists
+    cursor.execute("SELECT username FROM users WHERE username=?", (username,))
+    row = cursor.fetchone()
+    if not row:
+        # Create user with a dummy password since Google handles auth
+        cursor.execute("INSERT INTO users (username, password) VALUES (?, ?)", (username, "GOOGLE_AUTH_USER"))
+        conn.commit()
+    conn.close()
+    return True
+
 def get_user_logs(username):
     conn = sqlite3.connect(DB_PATH)
     conn.row_factory = sqlite3.Row

main.py

@@ -65,6 +65,19 @@ async def handle_signup(request: Request):
         return {"status": "success", "user": username}
     return JSONResponse(status_code=400, content={"status": "error", "message": "Username already taken."})
 
+@app.post("/api/google_login")
+async def handle_google_login(request: Request):
+    data = await request.json()
+    email = data.get("email")
+    if not email or "@" not in email:
+        return JSONResponse(status_code=400, content={"status": "error", "message": "Invalid Google Email."})
+    
+    username = email.split("@")[0].lower()
+    from database import login_or_create_google_user
+    login_or_create_google_user(username)
+    
+    return {"status": "success", "user": username}
+
 @app.get("/api/logs")
 async def get_logs_endpoint(user: str):
     logs = get_user_logs(user)

static/app.js

@@ -232,13 +232,35 @@ async function handleAuth() {
     }
 }
 
-function handleGoogleAuth() {
-    // Mock Google Auth logic
-    const mockGoogleId = "google_user_" + Math.floor(Math.random() * 1000);
-    const mockEmail = prompt("Google Auth Simulation:\n\nEnter your Google email address:");
-    if (mockEmail) {
-        const username = mockEmail.split('@')[0];
-        onLoginSuccess(username);
+async function handleGoogleAuth() {
+    els.authError.style.display = 'none';
+    const email = prompt("Google Sign In:\n\nPlease enter your Google email address to authenticate:");
+    if (!email) return;
+    if (!email.includes("@")) return alert("Please enter a valid email.");
+    
+    els.googleAuthBtn.disabled = true;
+    els.googleAuthBtn.innerText = "Authenticating...";
+    
+    try {
+        const res = await fetch('/api/google_login', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ email })
+        });
+        const data = await res.json();
+        
+        if (data.status === 'success') {
+            onLoginSuccess(data.user);
+        } else {
+            els.authError.innerText = data.message;
+            els.authError.style.display = 'block';
+        }
+    } catch(err) {
+        els.authError.innerText = "Google Auth failed.";
+        els.authError.style.display = 'block';
+    } finally {
+        els.googleAuthBtn.disabled = false;
+        els.googleAuthBtn.innerHTML = '<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" style="width: 20px;"> Sign in with Google';
     }
 }
 

templates/index.html

@@ -20,8 +20,8 @@
             <input type="text" id="login-username" placeholder="Username (e.g. vignesh)" autocomplete="off" style="margin-bottom: 12px; width:100%; padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5); color: white;">
             <input type="password" id="login-password" placeholder="Password" autocomplete="off" style="margin-bottom: 16px; width:100%; padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5); color: white;">
             
-            <button id="auth-btn" class="primary-btn" style="width: 100%; margin-bottom: 12px;">Login <i class="fa-solid fa-arrow-right"></i></button>
-            <button id="google-auth-btn" class="secondary-btn" style="width: 100%; margin-bottom: 16px; background: white; color: #333;"><i class="fa-brands fa-google" style="color: #4285F4;"></i> Sign in with Google</button>
+            <button id="auth-btn" class="primary-btn" style="width: 100%; margin-bottom: 12px; height: 50px;">Login <i class="fa-solid fa-arrow-right"></i></button>
+            <button id="google-auth-btn" class="secondary-btn" style="width: 100%; margin-bottom: 24px; background: white; color: #333; height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 600; font-size: 16px; border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"><img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" style="width: 20px;"> Sign in with Google</button>
             
             <div style="text-align: center; font-size: 14px;">
                 <span id="auth-switch-text" style="color: var(--text-secondary);">Don't have an account?</span>
@@ -105,11 +105,11 @@
                                 <div class="control-group" style="flex: 1;">
                                     <label><i class="fa-solid fa-microchip"></i> Select Model</label>
                                     <select id="model-selector">
-                                        <option value="local">VQA with LSTM and CNN</option>
-                                        <option value="local_yolo">Hybrid YOLOv8 + Contextual VQA</option>
-                                        <option value="hf_boss" id="hf-option">Web-Scale Autonomous Vision Reasoner (Qwen-VL)</option>
-                                        <option value="groq" id="groq-option">Mixture-of-Experts (MoE) Accelerated Vision</option>
-                                        <option value="gemini" id="gemini-option">Google Gemini (Baseline Benchmark)</option>
+                                        <option value="local">Primary: CNN-LSTM Baseline (Student Trained)</option>
+                                        <option value="local_yolo">Advanced: Hybrid YOLO-Vision Ensemble</option>
+                                        <option value="hf_boss" id="hf-option">Distilled: Cross-Modal Knowledge Transfer (Qwen-Aligned)</option>
+                                        <option value="groq" id="groq-option">Proprietary: Recursive Cognitive Reasoning (MoE-Driven)</option>
+                                        <option value="gemini" id="gemini-option">Baseline Benchmark: Google Gemini 3.1</option>
                                     </select>
                                 </div>
                                 <div class="control-group" style="flex: 1;">