Update app.py

app.py

@@ -1,464 +1,464 @@
-import pandas as pd
-import requests
-import uvicorn
-import hashlib
-import json
-import io
-import time
-from fastapi import FastAPI, Request, Response, Cookie
-from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
-from fastapi.middleware.cors import CORSMiddleware
-from typing import Optional
-
-# ==========================================
-# 1. CONFIGURATION (EDIT THESE)
-# ==========================================
-CLIENT_ID    = "J4PNT5QI22-100"  # Format: XPxxxxx-100
-SECRET_KEY   = "ABRSWC1PMR"
-# IMPORTANT: Change this to your Space's URL + /callback
-# Example: https://huggingface-username-space-name.hf.space/callback
-REDIRECT_URI = "https://your-space-url.hf.space/callback" 
-
-# Global Cache
-MASTER_DATA = []
-LAST_UPDATE = 0
-
-app = FastAPI()
-
-# ==========================================
-# 2. PYTHON BACKEND (Optimized Data Loader)
-# ==========================================
-
-def load_nifty_master():
-    """
-    Downloads the large CSV, filters ONLY NIFTY 50 and NIFTY FUTS using Pandas.
-    This runs in seconds and stays in RAM.
-    """
-    global MASTER_DATA, LAST_UPDATE
-    
-    print(">>> DOWNLOADING MASTER DATA...")
-    try:
-        url = "https://public.fyers.in/sym_details/NSE_FO.csv"
-        # Read CSV directly into Pandas
-        df = pd.read_csv(url, usecols=[0, 1, 8, 9, 13], names=['RecType','Desc','Exch','Expiry','Symbol','Unknown'], header=0)
-        
-        # 1. FILTER: Symbol must contain 'NIFTY' but NOT 'BANK', 'FIN', 'MID'
-        # We only want pure NIFTY (NIFTY 50)
-        mask = (
-            df['Symbol'].str.contains('NIFTY', na=False) & 
-            ~df['Symbol'].str.contains('BANKNIFTY', na=False) & 
-            ~df['Symbol'].str.contains('FINNIFTY', na=False) & 
-            ~df['Symbol'].str.contains('MIDCPNIFTY', na=False)
-        )
-        df = df[mask]
-
-        results = []
-        
-        # Add Spot manually
-        results.append({"s": "NSE:NIFTY50-INDEX", "e": 0, "k": 0})
-
-        # Process Rows
-        for _, row in df.iterrows():
-            sym = row['Symbol']
-            desc = str(row['Desc'])
-            exp = int(row['Expiry'])
-            
-            # Extract Strike
-            strike = 0.0
-            if "CE" in sym or "PE" in sym:
-                # Desc format usually: "NIFTY 06 Jan 20500 CE"
-                parts = desc.strip().split(' ')
-                # Try getting the 2nd to last item
-                if len(parts) >= 2:
-                    val = parts[-2]
-                    if val.replace('.','',1).isdigit():
-                        strike = float(val)
-            
-            results.append({
-                "s": sym,
-                "e": exp,
-                "k": strike
-            })
-
-        MASTER_DATA = results
-        LAST_UPDATE = time.time()
-        print(f">>> LOADED {len(results)} NIFTY SYMBOLS.")
-        return True
-    except Exception as e:
-        print(f"Error loading master: {e}")
-        return False
-
-# Initialize on startup
-@app.on_event("startup")
-def startup_event():
-    load_nifty_master()
-
-# ==========================================
-# 3. ROUTES
-# ==========================================
-
-@app.get("/")
-def home(access_token: Optional[str] = Cookie(None)):
-    if not access_token:
-        # Generate Auth URL
-        state = "init"
-        auth_url = (
-            f"https://api-t1.fyers.in/api/v3/generate-authcode?"
-            f"client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=code&state={state}"
-        )
-        return HTMLResponse(f"""
-        <div style="height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:sans-serif;">
-            <h1>FYERS NIFTY CHAIN (PYTHON)</h1>
-            <p>Please update REDIRECT_URI in app.py to match this HuggingFace Space URL.</p>
-            <a href="{auth_url}" style="background:#2962ff; color:white; padding:15px 30px; text-decoration:none; border-radius:5px; font-weight:bold;">LOGIN WITH FYERS</a>
-        </div>
-        """)
-    
-    # If logged in, serve the App
-    return HTMLResponse(HTML_TEMPLATE)
-
-@app.get("/callback")
-def callback(code: str):
-    # Validate Auth Code
-    app_id_hash = hashlib.sha256(f"{CLIENT_ID}:{SECRET_KEY}".encode()).hexdigest()
-    
-    payload = {
-        "grant_type": "authorization_code",
-        "appIdHash": app_id_hash,
-        "code": code
-    }
-    
-    resp = requests.post("https://api-t1.fyers.in/api/v3/validate-authcode", json=payload)
-    data = resp.json()
-    
-    if "access_token" in data:
-        full_token = f"{CLIENT_ID}:{data['access_token']}"
-        response = RedirectResponse(url="/")
-        response.set_cookie(key="access_token", value=full_token, httponly=True)
-        return response
-    else:
-        return JSONResponse(content={"error": "Login Failed", "details": data})
-
-@app.get("/logout")
-def logout():
-    response = RedirectResponse(url="/")
-    response.delete_cookie("access_token")
-    return response
-
-@app.get("/api/init")
-def get_master_data(force: bool = False):
-    global MASTER_DATA
-    if force or not MASTER_DATA:
-        load_nifty_master()
-    return JSONResponse(content=MASTER_DATA)
-
-@app.get("/api/depth")
-def get_market_depth(symbols: str, access_token: Optional[str] = Cookie(None)):
-    if not access_token:
-        return JSONResponse(content={"s": "error", "message": "No Token"}, status_code=401)
-    
-    url = f"https://api-t1.fyers.in/data/depth?symbol={symbols}&ohlcv_flag=1"
-    headers = {"Authorization": access_token}
-    
-    resp = requests.get(url, headers=headers)
-    return JSONResponse(content=resp.json())
-
-
-# ==========================================
-# 4. FRONTEND (Single Page Application)
-# ==========================================
-
-HTML_TEMPLATE = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>NIFTY PYTHON CHAIN</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
-    <style>
-        :root { 
-            --bg: #ffffff; --panel: #f4f6f8; --border: #e0e0e0; 
-            --text-main: #1a1a1a; --text-sub: #555555;
-            --accent: #2962ff; --green: #00c853; --red: #d50000;
-            --green-soft: rgba(0, 200, 83, 0.3); --red-soft: rgba(213, 0, 0, 0.3);
-            --atm-bg: rgba(41, 98, 255, 0.1);
-        }
-        * { box-sizing: border-box; }
-        body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
-
-        .top-nav { padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 60px; }
-        .btn { background: #fff; border: 1px solid var(--border); padding: 8px 16px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
-        .btn:hover { border-color: var(--accent); color: var(--accent); }
-        
-        .grid-layout { display: flex; height: calc(100vh - 60px); }
-        .chain-panel { flex: 1; display: flex; flex-direction: column; position: relative; }
-        .chain-header { display: grid; grid-template-columns: 1fr 180px 1fr; padding: 10px 0; background: #f8f9fa; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-align: center; color: var(--text-sub); }
-        .chain-body { flex: 1; overflow-y: auto; background: #fff; }
-        
-        .row { display: grid; grid-template-columns: 1fr 180px 1fr; border-bottom: 1px solid #f0f0f0; height: 45px; align-items: center; font-family: 'JetBrains Mono'; font-size: 12px; }
-        .row.atm { background: var(--atm-bg); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
-        
-        .mid-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
-        .visual-bar { position: absolute; top: 6px; bottom: 6px; z-index: 0; border-radius: 4px; transition: 0.3s; opacity: 0.8; }
-        .strike-txt { z-index: 2; font-weight: 800; font-size: 14px; }
-        .delta-txt { z-index: 2; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.7); padding: 0 4px; border-radius: 3px; }
-        
-        .side-col { padding: 0 15px; display: flex; justify-content: space-between; color: #666; font-size: 11px; }
-        
-        .fut-panel { width: 300px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
-        .fut-card { padding: 15px; background: #fff; border-bottom: 1px solid var(--border); }
-        .meter-bg { height: 6px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 5px; }
-        
-        /* Modal */
-        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.9); z-index: 1000; display: none; justify-content: center; align-items: center; }
-        .modal-box { background: #fff; border: 1px solid #ccc; width: 400px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 20px; }
-        .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; max-height: 50vh; overflow-y: auto; }
-        .exp-btn { padding: 10px; text-align: center; border: 1px solid #eee; border-radius: 4px; cursor: pointer; }
-        .exp-btn:hover { background: #f0f7ff; border-color: var(--accent); }
-        .exp-btn.active { background: var(--accent); color: white; }
-        
-        .loader { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.95); display:flex; justify-content:center; align-items:center; z-index: 2000; font-weight: 700; color: var(--accent); }
-    </style>
-</head>
-<body>
-
-<div class="loader" id="loader">INITIALIZING PYTHON DB...</div>
-
-<!-- MODAL -->
-<div class="modal" id="expModal">
-    <div class="modal-box">
-        <div style="display:flex; justify-content:space-between; font-weight:700;">
-            <span>SELECT EXPIRY</span>
-            <span style="cursor:pointer" onclick="document.getElementById('expModal').style.display='none'">✕</span>
-        </div>
-        <div class="modal-grid" id="expGrid"></div>
-    </div>
-</div>
-
-<div class="top-nav">
-    <div style="font-weight:800; font-size:18px; color:var(--accent);">NIFTY 50 (PYTHON)</div>
-    
-    <div style="display:flex; gap:20px; align-items:center;">
-        <div style="text-align:right;">
-            <div style="font-size:10px; font-weight:700; color:#888;">SPOT</div>
-            <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:16px;">0.00</div>
-        </div>
-        <button class="btn" onclick="openExpModal()">
-            <span style="color:#888">EXP:</span> <span id="selExpTxt">SELECT</span>
-        </button>
-        <button class="btn" onclick="location.href='/logout'" style="border-color:var(--red); color:var(--red);">LOGOUT</button>
-        <div id="statusDot" style="width:10px; height:10px; background:#ccc; border-radius:50%;"></div>
-    </div>
-</div>
-
-<div class="grid-layout">
-    <div class="chain-panel">
-        <div class="chain-header">
-            <div>CALL SELLERS (OI)</div>
-            <div>NET FLOW (PUT S - CALL S)</div>
-            <div>PUT SELLERS (OI)</div>
-        </div>
-        <div class="chain-body" id="chainBody"></div>
-    </div>
-    
-    <div class="fut-panel">
-        <div style="padding:15px; font-weight:700; border-bottom:1px solid var(--border); background:#fff;">FUTURES</div>
-        <div id="futBody"></div>
-    </div>
-</div>
-
-<script>
-    let DB = [];
-    let SPOT_SYM = "NSE:NIFTY50-INDEX";
-    let ACTIVE_EXP = 0;
-    let SPOT_PRICE = 0;
-    let POLLER = null;
-    let FUT_SYMS = [];
-
-    window.onload = async () => {
-        try {
-            // Load from Python Backend
-            const res = await fetch('/api/init');
-            DB = await res.json();
-            document.getElementById('loader').style.display = 'none';
-            
-            if(DB.length === 0) { alert("DB Empty. Check Python Logs."); return; }
-            
-            // Setup Futures
-            FUT_SYMS = DB.filter(i => i.s.startsWith('NSE:NIFTY') && i.s.endsWith('FUT') && /\\d/.test(i.s))
-                         .sort((a,b) => a.e - b.e).slice(0,3);
-                         
-            openExpModal();
-        } catch(e) {
-            document.getElementById('loader').innerText = "ERROR LOADING DATA";
-        }
-    };
-
-    function openExpModal() {
-        const grid = document.getElementById('expGrid');
-        grid.innerHTML = '';
-        const ops = DB.filter(i => i.s.endsWith('CE') || i.s.endsWith('PE'));
-        const exps = [...new Set(ops.map(i => i.e))].sort((a,b) => a-b);
-        const today = Math.floor(Date.now()/1000) - 86400;
-
-        exps.forEach(ts => {
-            if(ts < today) return;
-            const d = new Date(ts * 1000);
-            const dStr = d.toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
-            const div = document.createElement('div');
-            div.className = `exp-btn ${ts === ACTIVE_EXP ? 'active' : ''}`;
-            div.innerText = dStr;
-            div.onclick = () => {
-                ACTIVE_EXP = ts;
-                document.getElementById('selExpTxt').innerText = dStr;
-                document.getElementById('expModal').style.display = 'none';
-                buildChain();
-            }
-            grid.appendChild(div);
-        });
-        document.getElementById('expModal').style.display = 'flex';
-    }
-
-    function buildChain() {
-        const body = document.getElementById('chainBody');
-        body.innerHTML = '';
-        
-        const relevant = DB.filter(i => i.e === ACTIVE_EXP && (i.s.endsWith('CE') || i.s.endsWith('PE')));
-        const strikes = [...new Set(relevant.map(i => i.k))].sort((a,b) => a-b);
-
-        body.innerHTML = strikes.map(k => `
-            <div class="row" id="row-${k}" data-k="${k}">
-                <div class="side-col" id="ce-${k}"><span>-</span><span>-</span></div>
-                <div class="mid-col">
-                    <div class="visual-bar" id="bar-${k}"></div>
-                    <span class="strike-txt">${k}</span>
-                    <span class="delta-txt" id="val-${k}">-</span>
-                </div>
-                <div class="side-col" id="pe-${k}"><span>-</span><span>-</span></div>
-            </div>
-        `).join('');
-
-        if(POLLER) clearInterval(POLLER);
-        POLLER = setInterval(poll, 2000);
-        poll();
-    }
-
-    async function poll() {
-        let syms = [SPOT_SYM, ...FUT_SYMS.map(f => f.s)];
-        
-        // Optimize visible rows
-        if(SPOT_PRICE > 0) {
-            const rows = Array.from(document.querySelectorAll('.row'));
-            let closest = rows[0], min = 999999;
-            rows.forEach(r => {
-                const diff = Math.abs(SPOT_PRICE - parseFloat(r.dataset.k));
-                if(diff < min) { min = diff; closest = r; }
-            });
-            document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
-            closest.classList.add('atm');
-            
-            if(!window.scrolled) { closest.scrollIntoView({block:'center'}); window.scrolled = true; }
-
-            const idx = rows.indexOf(closest);
-            const viewRows = rows.slice(Math.max(0, idx-15), Math.min(rows.length, idx+15));
-            const viewKs = viewRows.map(r => parseFloat(r.dataset.k));
-            
-            DB.forEach(i => {
-                if(i.e === ACTIVE_EXP && viewKs.includes(i.k)) syms.push(i.s);
-            });
-        }
-
-        try {
-            const res = await fetch(`/api/depth?symbols=${encodeURIComponent([...new Set(syms)].join(','))}`);
-            const json = await res.json();
-            if(json.s === 'ok') {
-                document.getElementById('statusDot').style.background = 'var(--green)';
-                updateUI(json.d);
-            }
-        } catch(e) { document.getElementById('statusDot').style.background = 'var(--red)'; }
-    }
-
-    function updateUI(data) {
-        if(data[SPOT_SYM]) {
-            SPOT_PRICE = data[SPOT_SYM].ltp;
-            document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
-        }
-
-        // Futures
-        document.getElementById('futBody').innerHTML = FUT_SYMS.map(obj => {
-            const d = data[obj.s];
-            if(!d) return '';
-            const tot = (d.totalbuyqty + d.totalsellqty) || 1;
-            const dt = new Date(obj.e * 1000).toLocaleDateString('en-GB', {day:'numeric', month:'short'});
-            return `
-            <div class="fut-card">
-                <div style="display:flex; justify-content:space-between; font-weight:700;">
-                    <span>${dt} FUT</span> <span style="color:${d.ch>=0?'var(--green)':'var(--red)'}">${d.ltp}</span>
-                </div>
-                <div class="meter-bg">
-                    <div style="width:${(d.totalbuyqty/tot)*100}%; background:var(--green)"></div>
-                    <div style="width:${(d.totalsellqty/tot)*100}%; background:var(--red)"></div>
-                </div>
-                <div style="display:flex; justify-content:space-between; font-size:10px; color:#666; margin-top:2px;">
-                    <span>B: ${fmt(d.totalbuyqty)}</span> <span>S: ${fmt(d.totalsellqty)}</span>
-                </div>
-            </div>`;
-        }).join('');
-
-        // Chain
-        const rowData = {};
-        for(const [sym, d] of Object.entries(data)) {
-            const meta = DB.find(x => x.s === sym);
-            if(!meta || meta.e !== ACTIVE_EXP) continue;
-            if(!rowData[meta.k]) rowData[meta.k] = { ce:0, pe:0 };
-            if(sym.endsWith('CE')) rowData[meta.k].ce = d.totalsellqty;
-            if(sym.endsWith('PE')) rowData[meta.k].pe = d.totalsellqty;
-        }
-
-        let maxD = 0;
-        for(const k in rowData) maxD = Math.max(maxD, Math.abs(rowData[k].pe - rowData[k].ce));
-
-        for(const k in rowData) {
-            const r = rowData[k];
-            const delta = r.pe - r.ce; // Put Sellers - Call Sellers
-            
-            const ceDiv = document.getElementById(`ce-${k}`);
-            const peDiv = document.getElementById(`pe-${k}`);
-            if(ceDiv) ceDiv.innerHTML = `<span>S: <strong>${fmt(r.ce)}</strong></span>`;
-            if(peDiv) peDiv.innerHTML = `<span>S: <strong>${fmt(r.pe)}</strong></span>`;
-            
-            const bar = document.getElementById(`bar-${k}`);
-            const val = document.getElementById(`val-${k}`);
-            
-            if(bar) {
-                const pct = maxD > 0 ? (Math.abs(delta)/maxD)*100 : 0;
-                if(delta >= 0) {
-                    bar.style.background = 'var(--green-soft)';
-                    bar.style.left = '50%';
-                    bar.style.width = (pct/2) + '%';
-                    val.style.color = 'var(--green)';
-                    val.innerText = "+" + fmt(delta);
-                } else {
-                    bar.style.background = 'var(--red-soft)';
-                    bar.style.left = (50 - (pct/2)) + '%';
-                    bar.style.width = (pct/2) + '%';
-                    val.style.color = 'var(--red)';
-                    val.innerText = fmt(delta);
-                }
-            }
-        }
-    }
-
-    function fmt(n) {
-        if(n>=100000) return (n/100000).toFixed(2)+'L';
-        if(n>=1000) return (n/1000).toFixed(1)+'k';
-        return n;
-    }
-</script>
-</body>
-</html>
-"""
-
-if __name__ == "__main__":
+import pandas as pd
+import requests
+import uvicorn
+import hashlib
+import json
+import io
+import time
+from fastapi import FastAPI, Request, Response, Cookie
+from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from typing import Optional
+
+# ==========================================
+# 1. CONFIGURATION (EDIT THESE)
+# ==========================================
+CLIENT_ID    = "J4PNT5QI22-100"  # Format: XPxxxxx-100
+SECRET_KEY   = "ABRSWC1PMR"
+# IMPORTANT: Change this to your Space's URL + /callback
+# Example: https://huggingface-username-space-name.hf.space/callback
+REDIRECT_URI = "https://topsecrettraders-depthchain.hf.space/callback" 
+
+# Global Cache
+MASTER_DATA = []
+LAST_UPDATE = 0
+
+app = FastAPI()
+
+# ==========================================
+# 2. PYTHON BACKEND (Optimized Data Loader)
+# ==========================================
+
+def load_nifty_master():
+    """
+    Downloads the large CSV, filters ONLY NIFTY 50 and NIFTY FUTS using Pandas.
+    This runs in seconds and stays in RAM.
+    """
+    global MASTER_DATA, LAST_UPDATE
+    
+    print(">>> DOWNLOADING MASTER DATA...")
+    try:
+        url = "https://public.fyers.in/sym_details/NSE_FO.csv"
+        # Read CSV directly into Pandas
+        df = pd.read_csv(url, usecols=[0, 1, 8, 9, 13], names=['RecType','Desc','Exch','Expiry','Symbol','Unknown'], header=0)
+        
+        # 1. FILTER: Symbol must contain 'NIFTY' but NOT 'BANK', 'FIN', 'MID'
+        # We only want pure NIFTY (NIFTY 50)
+        mask = (
+            df['Symbol'].str.contains('NIFTY', na=False) & 
+            ~df['Symbol'].str.contains('BANKNIFTY', na=False) & 
+            ~df['Symbol'].str.contains('FINNIFTY', na=False) & 
+            ~df['Symbol'].str.contains('MIDCPNIFTY', na=False)
+        )
+        df = df[mask]
+
+        results = []
+        
+        # Add Spot manually
+        results.append({"s": "NSE:NIFTY50-INDEX", "e": 0, "k": 0})
+
+        # Process Rows
+        for _, row in df.iterrows():
+            sym = row['Symbol']
+            desc = str(row['Desc'])
+            exp = int(row['Expiry'])
+            
+            # Extract Strike
+            strike = 0.0
+            if "CE" in sym or "PE" in sym:
+                # Desc format usually: "NIFTY 06 Jan 20500 CE"
+                parts = desc.strip().split(' ')
+                # Try getting the 2nd to last item
+                if len(parts) >= 2:
+                    val = parts[-2]
+                    if val.replace('.','',1).isdigit():
+                        strike = float(val)
+            
+            results.append({
+                "s": sym,
+                "e": exp,
+                "k": strike
+            })
+
+        MASTER_DATA = results
+        LAST_UPDATE = time.time()
+        print(f">>> LOADED {len(results)} NIFTY SYMBOLS.")
+        return True
+    except Exception as e:
+        print(f"Error loading master: {e}")
+        return False
+
+# Initialize on startup
+@app.on_event("startup")
+def startup_event():
+    load_nifty_master()
+
+# ==========================================
+# 3. ROUTES
+# ==========================================
+
+@app.get("/")
+def home(access_token: Optional[str] = Cookie(None)):
+    if not access_token:
+        # Generate Auth URL
+        state = "init"
+        auth_url = (
+            f"https://api-t1.fyers.in/api/v3/generate-authcode?"
+            f"client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=code&state={state}"
+        )
+        return HTMLResponse(f"""
+        <div style="height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:sans-serif;">
+            <h1>FYERS NIFTY CHAIN (PYTHON)</h1>
+            <p>Please update REDIRECT_URI in app.py to match this HuggingFace Space URL.</p>
+            <a href="{auth_url}" style="background:#2962ff; color:white; padding:15px 30px; text-decoration:none; border-radius:5px; font-weight:bold;">LOGIN WITH FYERS</a>
+        </div>
+        """)
+    
+    # If logged in, serve the App
+    return HTMLResponse(HTML_TEMPLATE)
+
+@app.get("/callback")
+def callback(code: str):
+    # Validate Auth Code
+    app_id_hash = hashlib.sha256(f"{CLIENT_ID}:{SECRET_KEY}".encode()).hexdigest()
+    
+    payload = {
+        "grant_type": "authorization_code",
+        "appIdHash": app_id_hash,
+        "code": code
+    }
+    
+    resp = requests.post("https://api-t1.fyers.in/api/v3/validate-authcode", json=payload)
+    data = resp.json()
+    
+    if "access_token" in data:
+        full_token = f"{CLIENT_ID}:{data['access_token']}"
+        response = RedirectResponse(url="/")
+        response.set_cookie(key="access_token", value=full_token, httponly=True)
+        return response
+    else:
+        return JSONResponse(content={"error": "Login Failed", "details": data})
+
+@app.get("/logout")
+def logout():
+    response = RedirectResponse(url="/")
+    response.delete_cookie("access_token")
+    return response
+
+@app.get("/api/init")
+def get_master_data(force: bool = False):
+    global MASTER_DATA
+    if force or not MASTER_DATA:
+        load_nifty_master()
+    return JSONResponse(content=MASTER_DATA)
+
+@app.get("/api/depth")
+def get_market_depth(symbols: str, access_token: Optional[str] = Cookie(None)):
+    if not access_token:
+        return JSONResponse(content={"s": "error", "message": "No Token"}, status_code=401)
+    
+    url = f"https://api-t1.fyers.in/data/depth?symbol={symbols}&ohlcv_flag=1"
+    headers = {"Authorization": access_token}
+    
+    resp = requests.get(url, headers=headers)
+    return JSONResponse(content=resp.json())
+
+
+# ==========================================
+# 4. FRONTEND (Single Page Application)
+# ==========================================
+
+HTML_TEMPLATE = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>NIFTY PYTHON CHAIN</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <style>
+        :root { 
+            --bg: #ffffff; --panel: #f4f6f8; --border: #e0e0e0; 
+            --text-main: #1a1a1a; --text-sub: #555555;
+            --accent: #2962ff; --green: #00c853; --red: #d50000;
+            --green-soft: rgba(0, 200, 83, 0.3); --red-soft: rgba(213, 0, 0, 0.3);
+            --atm-bg: rgba(41, 98, 255, 0.1);
+        }
+        * { box-sizing: border-box; }
+        body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
+
+        .top-nav { padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 60px; }
+        .btn { background: #fff; border: 1px solid var(--border); padding: 8px 16px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
+        .btn:hover { border-color: var(--accent); color: var(--accent); }
+        
+        .grid-layout { display: flex; height: calc(100vh - 60px); }
+        .chain-panel { flex: 1; display: flex; flex-direction: column; position: relative; }
+        .chain-header { display: grid; grid-template-columns: 1fr 180px 1fr; padding: 10px 0; background: #f8f9fa; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-align: center; color: var(--text-sub); }
+        .chain-body { flex: 1; overflow-y: auto; background: #fff; }
+        
+        .row { display: grid; grid-template-columns: 1fr 180px 1fr; border-bottom: 1px solid #f0f0f0; height: 45px; align-items: center; font-family: 'JetBrains Mono'; font-size: 12px; }
+        .row.atm { background: var(--atm-bg); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
+        
+        .mid-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
+        .visual-bar { position: absolute; top: 6px; bottom: 6px; z-index: 0; border-radius: 4px; transition: 0.3s; opacity: 0.8; }
+        .strike-txt { z-index: 2; font-weight: 800; font-size: 14px; }
+        .delta-txt { z-index: 2; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.7); padding: 0 4px; border-radius: 3px; }
+        
+        .side-col { padding: 0 15px; display: flex; justify-content: space-between; color: #666; font-size: 11px; }
+        
+        .fut-panel { width: 300px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
+        .fut-card { padding: 15px; background: #fff; border-bottom: 1px solid var(--border); }
+        .meter-bg { height: 6px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 5px; }
+        
+        /* Modal */
+        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.9); z-index: 1000; display: none; justify-content: center; align-items: center; }
+        .modal-box { background: #fff; border: 1px solid #ccc; width: 400px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 20px; }
+        .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; max-height: 50vh; overflow-y: auto; }
+        .exp-btn { padding: 10px; text-align: center; border: 1px solid #eee; border-radius: 4px; cursor: pointer; }
+        .exp-btn:hover { background: #f0f7ff; border-color: var(--accent); }
+        .exp-btn.active { background: var(--accent); color: white; }
+        
+        .loader { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.95); display:flex; justify-content:center; align-items:center; z-index: 2000; font-weight: 700; color: var(--accent); }
+    </style>
+</head>
+<body>
+
+<div class="loader" id="loader">INITIALIZING PYTHON DB...</div>
+
+<!-- MODAL -->
+<div class="modal" id="expModal">
+    <div class="modal-box">
+        <div style="display:flex; justify-content:space-between; font-weight:700;">
+            <span>SELECT EXPIRY</span>
+            <span style="cursor:pointer" onclick="document.getElementById('expModal').style.display='none'">✕</span>
+        </div>
+        <div class="modal-grid" id="expGrid"></div>
+    </div>
+</div>
+
+<div class="top-nav">
+    <div style="font-weight:800; font-size:18px; color:var(--accent);">NIFTY 50 (PYTHON)</div>
+    
+    <div style="display:flex; gap:20px; align-items:center;">
+        <div style="text-align:right;">
+            <div style="font-size:10px; font-weight:700; color:#888;">SPOT</div>
+            <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:16px;">0.00</div>
+        </div>
+        <button class="btn" onclick="openExpModal()">
+            <span style="color:#888">EXP:</span> <span id="selExpTxt">SELECT</span>
+        </button>
+        <button class="btn" onclick="location.href='/logout'" style="border-color:var(--red); color:var(--red);">LOGOUT</button>
+        <div id="statusDot" style="width:10px; height:10px; background:#ccc; border-radius:50%;"></div>
+    </div>
+</div>
+
+<div class="grid-layout">
+    <div class="chain-panel">
+        <div class="chain-header">
+            <div>CALL SELLERS (OI)</div>
+            <div>NET FLOW (PUT S - CALL S)</div>
+            <div>PUT SELLERS (OI)</div>
+        </div>
+        <div class="chain-body" id="chainBody"></div>
+    </div>
+    
+    <div class="fut-panel">
+        <div style="padding:15px; font-weight:700; border-bottom:1px solid var(--border); background:#fff;">FUTURES</div>
+        <div id="futBody"></div>
+    </div>
+</div>
+
+<script>
+    let DB = [];
+    let SPOT_SYM = "NSE:NIFTY50-INDEX";
+    let ACTIVE_EXP = 0;
+    let SPOT_PRICE = 0;
+    let POLLER = null;
+    let FUT_SYMS = [];
+
+    window.onload = async () => {
+        try {
+            // Load from Python Backend
+            const res = await fetch('/api/init');
+            DB = await res.json();
+            document.getElementById('loader').style.display = 'none';
+            
+            if(DB.length === 0) { alert("DB Empty. Check Python Logs."); return; }
+            
+            // Setup Futures
+            FUT_SYMS = DB.filter(i => i.s.startsWith('NSE:NIFTY') && i.s.endsWith('FUT') && /\\d/.test(i.s))
+                         .sort((a,b) => a.e - b.e).slice(0,3);
+                         
+            openExpModal();
+        } catch(e) {
+            document.getElementById('loader').innerText = "ERROR LOADING DATA";
+        }
+    };
+
+    function openExpModal() {
+        const grid = document.getElementById('expGrid');
+        grid.innerHTML = '';
+        const ops = DB.filter(i => i.s.endsWith('CE') || i.s.endsWith('PE'));
+        const exps = [...new Set(ops.map(i => i.e))].sort((a,b) => a-b);
+        const today = Math.floor(Date.now()/1000) - 86400;
+
+        exps.forEach(ts => {
+            if(ts < today) return;
+            const d = new Date(ts * 1000);
+            const dStr = d.toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
+            const div = document.createElement('div');
+            div.className = `exp-btn ${ts === ACTIVE_EXP ? 'active' : ''}`;
+            div.innerText = dStr;
+            div.onclick = () => {
+                ACTIVE_EXP = ts;
+                document.getElementById('selExpTxt').innerText = dStr;
+                document.getElementById('expModal').style.display = 'none';
+                buildChain();
+            }
+            grid.appendChild(div);
+        });
+        document.getElementById('expModal').style.display = 'flex';
+    }
+
+    function buildChain() {
+        const body = document.getElementById('chainBody');
+        body.innerHTML = '';
+        
+        const relevant = DB.filter(i => i.e === ACTIVE_EXP && (i.s.endsWith('CE') || i.s.endsWith('PE')));
+        const strikes = [...new Set(relevant.map(i => i.k))].sort((a,b) => a-b);
+
+        body.innerHTML = strikes.map(k => `
+            <div class="row" id="row-${k}" data-k="${k}">
+                <div class="side-col" id="ce-${k}"><span>-</span><span>-</span></div>
+                <div class="mid-col">
+                    <div class="visual-bar" id="bar-${k}"></div>
+                    <span class="strike-txt">${k}</span>
+                    <span class="delta-txt" id="val-${k}">-</span>
+                </div>
+                <div class="side-col" id="pe-${k}"><span>-</span><span>-</span></div>
+            </div>
+        `).join('');
+
+        if(POLLER) clearInterval(POLLER);
+        POLLER = setInterval(poll, 2000);
+        poll();
+    }
+
+    async function poll() {
+        let syms = [SPOT_SYM, ...FUT_SYMS.map(f => f.s)];
+        
+        // Optimize visible rows
+        if(SPOT_PRICE > 0) {
+            const rows = Array.from(document.querySelectorAll('.row'));
+            let closest = rows[0], min = 999999;
+            rows.forEach(r => {
+                const diff = Math.abs(SPOT_PRICE - parseFloat(r.dataset.k));
+                if(diff < min) { min = diff; closest = r; }
+            });
+            document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
+            closest.classList.add('atm');
+            
+            if(!window.scrolled) { closest.scrollIntoView({block:'center'}); window.scrolled = true; }
+
+            const idx = rows.indexOf(closest);
+            const viewRows = rows.slice(Math.max(0, idx-15), Math.min(rows.length, idx+15));
+            const viewKs = viewRows.map(r => parseFloat(r.dataset.k));
+            
+            DB.forEach(i => {
+                if(i.e === ACTIVE_EXP && viewKs.includes(i.k)) syms.push(i.s);
+            });
+        }
+
+        try {
+            const res = await fetch(`/api/depth?symbols=${encodeURIComponent([...new Set(syms)].join(','))}`);
+            const json = await res.json();
+            if(json.s === 'ok') {
+                document.getElementById('statusDot').style.background = 'var(--green)';
+                updateUI(json.d);
+            }
+        } catch(e) { document.getElementById('statusDot').style.background = 'var(--red)'; }
+    }
+
+    function updateUI(data) {
+        if(data[SPOT_SYM]) {
+            SPOT_PRICE = data[SPOT_SYM].ltp;
+            document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
+        }
+
+        // Futures
+        document.getElementById('futBody').innerHTML = FUT_SYMS.map(obj => {
+            const d = data[obj.s];
+            if(!d) return '';
+            const tot = (d.totalbuyqty + d.totalsellqty) || 1;
+            const dt = new Date(obj.e * 1000).toLocaleDateString('en-GB', {day:'numeric', month:'short'});
+            return `
+            <div class="fut-card">
+                <div style="display:flex; justify-content:space-between; font-weight:700;">
+                    <span>${dt} FUT</span> <span style="color:${d.ch>=0?'var(--green)':'var(--red)'}">${d.ltp}</span>
+                </div>
+                <div class="meter-bg">
+                    <div style="width:${(d.totalbuyqty/tot)*100}%; background:var(--green)"></div>
+                    <div style="width:${(d.totalsellqty/tot)*100}%; background:var(--red)"></div>
+                </div>
+                <div style="display:flex; justify-content:space-between; font-size:10px; color:#666; margin-top:2px;">
+                    <span>B: ${fmt(d.totalbuyqty)}</span> <span>S: ${fmt(d.totalsellqty)}</span>
+                </div>
+            </div>`;
+        }).join('');
+
+        // Chain
+        const rowData = {};
+        for(const [sym, d] of Object.entries(data)) {
+            const meta = DB.find(x => x.s === sym);
+            if(!meta || meta.e !== ACTIVE_EXP) continue;
+            if(!rowData[meta.k]) rowData[meta.k] = { ce:0, pe:0 };
+            if(sym.endsWith('CE')) rowData[meta.k].ce = d.totalsellqty;
+            if(sym.endsWith('PE')) rowData[meta.k].pe = d.totalsellqty;
+        }
+
+        let maxD = 0;
+        for(const k in rowData) maxD = Math.max(maxD, Math.abs(rowData[k].pe - rowData[k].ce));
+
+        for(const k in rowData) {
+            const r = rowData[k];
+            const delta = r.pe - r.ce; // Put Sellers - Call Sellers
+            
+            const ceDiv = document.getElementById(`ce-${k}`);
+            const peDiv = document.getElementById(`pe-${k}`);
+            if(ceDiv) ceDiv.innerHTML = `<span>S: <strong>${fmt(r.ce)}</strong></span>`;
+            if(peDiv) peDiv.innerHTML = `<span>S: <strong>${fmt(r.pe)}</strong></span>`;
+            
+            const bar = document.getElementById(`bar-${k}`);
+            const val = document.getElementById(`val-${k}`);
+            
+            if(bar) {
+                const pct = maxD > 0 ? (Math.abs(delta)/maxD)*100 : 0;
+                if(delta >= 0) {
+                    bar.style.background = 'var(--green-soft)';
+                    bar.style.left = '50%';
+                    bar.style.width = (pct/2) + '%';
+                    val.style.color = 'var(--green)';
+                    val.innerText = "+" + fmt(delta);
+                } else {
+                    bar.style.background = 'var(--red-soft)';
+                    bar.style.left = (50 - (pct/2)) + '%';
+                    bar.style.width = (pct/2) + '%';
+                    val.style.color = 'var(--red)';
+                    val.innerText = fmt(delta);
+                }
+            }
+        }
+    }
+
+    function fmt(n) {
+        if(n>=100000) return (n/100000).toFixed(2)+'L';
+        if(n>=1000) return (n/1000).toFixed(1)+'k';
+        return n;
+    }
+</script>
+</body>
+</html>
+"""
+
+if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=7860)