Update app.py

app.py

@@ -1,29 +1,593 @@
-# Use the official Python 3.9 image
-FROM python:3.9
+import pandas as pd
+import requests
+import uvicorn
+import hashlib
+import json
+import time
+import urllib.parse
+import os
+import threading
+import httpx # Required for async non-blocking requests
+from fastapi import FastAPI, Request, Response, Cookie, BackgroundTasks, Depends
+from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
+from typing import Optional
 
-# Set up a new user named "user" with user ID 1000
-# Hugging Face requires a non-root user for security
-RUN useradd -m -u 1000 user
+# ==========================================
+# 1. CONFIGURATION
+# ==========================================
+CLIENT_ID    = "J4PNT5QI22-100" 
+SECRET_KEY   = "ABRSWC1PMR"
+# IMPORTANT: Ensure this matches your Space URL exactly
+REDIRECT_URI = "https://topsecrettraders-depthchain.hf.space/callback" 
 
-# Switch to the "user" user
-USER user
+CACHE_FILE = "nifty_master.json"
 
-# Set environment variables
-ENV HOME=/home/user \
-    PATH=/home/user/.local/bin:$PATH
+app = FastAPI()
 
-# Set the working directory to the user's home directory
-WORKDIR $HOME/app
+# Global Async Client for high-performance proxying
+client = httpx.AsyncClient()
 
-# Copy the current directory contents into the container at $HOME/app
-# We use --chown=user to ensure the new user owns the files
-COPY --chown=user . $HOME/app
+# ==========================================
+# 2. ROBUST DATA LOADER (THREAD SAFE)
+# ==========================================
 
-# Install any needed packages specified in requirements.txt
-RUN pip install --no-cache-dir --upgrade -r requirements.txt
+SYSTEM_STATUS = {
+    "ready": False,
+    "message": "Booting..."
+}
+UPDATE_LOCK = threading.Lock()
 
-# Make port 7860 available to the world outside this container
-EXPOSE 7860
+def update_master_db():
+    """
+    Runs in background. Downloads, filters, and saves JSON.
+    Only keeps NIFTY symbols and Expiry details.
+    """
+    global SYSTEM_STATUS
+    
+    if not UPDATE_LOCK.acquire(blocking=False):
+        return 
 
-# Run app.py when the container launches
-CMD ["python", "app.py"]
+    try:
+        SYSTEM_STATUS["message"] = "Downloading Fyers Master CSV..."
+        print(">>> [BG TASK] STARTING DOWNLOAD...")
+        
+        headers = {"User-Agent": "Mozilla/5.0"}
+        url = "https://public.fyers.in/sym_details/NSE_FO.csv"
+        
+        df = pd.read_csv(
+            url, 
+            usecols=[0, 1, 8, 9], 
+            names=['Token', 'Desc', 'Expiry', 'Symbol'], 
+            header=0,
+            on_bad_lines='skip',
+            storage_options=headers
+        )
+        
+        SYSTEM_STATUS["message"] = "Processing NIFTY Data..."
+        
+        df['Symbol'] = df['Symbol'].astype(str)
+        df['Desc'] = df['Desc'].astype(str)
+        
+        # Filter: Only NIFTY
+        mask = (
+            df['Symbol'].str.contains('NIFTY') & 
+            ~df['Symbol'].str.contains('BANKNIFTY') & 
+            ~df['Symbol'].str.contains('FINNIFTY') & 
+            ~df['Symbol'].str.contains('MIDCPNIFTY')
+        )
+        df = df[mask]
+
+        # Structure optimized for Frontend logic
+        results = [{"s": "NSE:NIFTY50-INDEX", "e": 0, "k": 0}]
+
+        for _, row in df.iterrows():
+            sym = row['Symbol']
+            desc = row['Desc']
+            try:
+                exp = int(row['Expiry'])
+            except:
+                exp = 0
+            
+            strike = 0.0
+            
+            # Logic: Parse Strike from Desc
+            if "CE" in sym or "PE" in sym:
+                parts = desc.strip().split(' ')
+                if len(parts) >= 2:
+                    val = parts[-2]
+                    val_clean = val.replace('.', '', 1)
+                    if val_clean.isdigit():
+                        strike = float(val)
+            
+            results.append({"s": sym, "e": exp, "k": strike})
+
+        with open(CACHE_FILE, "w") as f:
+            json.dump(results, f)
+            
+        SYSTEM_STATUS["ready"] = True
+        SYSTEM_STATUS["message"] = "Ready"
+        print(f">>> [BG TASK] COMPLETE. Saved {len(results)} symbols.")
+
+    except Exception as e:
+        print(f">>> [BG TASK] ERROR: {e}")
+        SYSTEM_STATUS["message"] = f"Error: {str(e)}"
+    finally:
+        UPDATE_LOCK.release()
+
+@app.on_event("startup")
+async def startup_event():
+    # Initialize async client
+    global client
+    client = httpx.AsyncClient()
+    
+    if os.path.exists(CACHE_FILE):
+        SYSTEM_STATUS["ready"] = True
+        SYSTEM_STATUS["message"] = "Loaded from Cache"
+        print(">>> STARTUP: Cache found. System Ready.")
+    else:
+        thread = threading.Thread(target=update_master_db)
+        thread.start()
+
+@app.on_event("shutdown")
+async def shutdown_event():
+    await client.aclose()
+
+# ==========================================
+# 3. ROUTES
+# ==========================================
+
+@app.get("/")
+def home(access_token: Optional[str] = Cookie(None)):
+    if not access_token:
+        state = "init"
+        enc_redirect = urllib.parse.quote(REDIRECT_URI, safe="")
+        auth_url = (
+            f"https://api-t1.fyers.in/api/v3/generate-authcode?"
+            f"client_id={CLIENT_ID}&redirect_uri={enc_redirect}&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; background:#f5f5f5;">
+            <div style="background:white; padding:40px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.1); text-align:center;">
+                <h2 style="margin-top:0;">Authentication Required</h2>
+                <a href="{auth_url}" style="display:inline-block; background:#2962ff; color:white; padding:12px 25px; text-decoration:none; border-radius:5px; font-weight:bold; margin-top:10px;">LOGIN WITH FYERS</a>
+            </div>
+        </div>
+        """)
+    
+    return HTMLResponse(HTML_TEMPLATE)
+
+@app.get("/callback")
+def callback(auth_code: Optional[str] = None, code: Optional[str] = None):
+    final_code = auth_code if auth_code else code
+    if not final_code: return JSONResponse({"error": "No Code"})
+
+    app_id_hash = hashlib.sha256(f"{CLIENT_ID}:{SECRET_KEY}".encode()).hexdigest()
+    # Initial auth can remain synchronous as it happens once
+    resp = requests.post("https://api-t1.fyers.in/api/v3/validate-authcode", json={
+        "grant_type": "authorization_code", "appIdHash": app_id_hash, "code": final_code
+    })
+    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 HTMLResponse(f"Login Failed: {json.dumps(data)}")
+
+@app.get("/logout")
+def logout():
+    response = RedirectResponse(url="/")
+    response.delete_cookie("access_token")
+    return response
+
+@app.get("/api/status")
+def get_status():
+    return JSONResponse(SYSTEM_STATUS)
+
+@app.get("/api/init")
+def get_master_data():
+    """
+    Returns the Master JSON (Symbols & Expiry) only.
+    """
+    if not SYSTEM_STATUS["ready"]:
+        return JSONResponse({"s": "wait", "msg": SYSTEM_STATUS["message"]})
+    try:
+        with open(CACHE_FILE, "r") as f:
+            data = json.load(f)
+        return JSONResponse(data)
+    except:
+        return JSONResponse([])
+
+@app.get("/api/refresh")
+def force_refresh(background_tasks: BackgroundTasks):
+    SYSTEM_STATUS["ready"] = False
+    SYSTEM_STATUS["message"] = "Refreshing..."
+    background_tasks.add_task(update_master_db)
+    return JSONResponse({"s": "ok"})
+
+# --- HIGH PERFORMANCE ASYNC PROXY ---
+@app.get("/api/depth")
+async def get_market_depth(symbols: str, response: Response, access_token: Optional[str] = Cookie(None)):
+    """
+    Async Proxy:
+    1. Receives list of symbols from Frontend.
+    2. Uses persistent async connection to fetch from Fyers.
+    3. Returns raw JSON to Frontend.
+    Note: We must proxy because calling Fyers directly from Browser causes CORS errors.
+    This method is non-blocking, so multiple users won't lag each other.
+    """
+    if not access_token: 
+        return JSONResponse(status_code=401, content={"s":"error", "code": "no_token"})
+    
+    response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
+    
+    url = f"https://api-t1.fyers.in/data/depth?symbol={symbols}&ohlcv_flag=1"
+    
+    try:
+        # Use the global async client (non-blocking IO)
+        fyers_resp = await client.get(url, headers={"Authorization": access_token})
+        
+        if fyers_resp.status_code == 401:
+            return JSONResponse(status_code=401, content={"s": "auth_expired"})
+            
+        return JSONResponse(content=fyers_resp.json())
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"s": "error", "msg": str(e)})
+
+# ==========================================
+# 4. FRONTEND
+# ==========================================
+
+HTML_TEMPLATE = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>NIFTY PRO CHAIN (ASYNC)</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; transition:0.2s; }
+        .btn:hover { border-color: var(--accent); color: var(--accent); background:#f0f7ff; }
+        
+        .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 { 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 OVERLAY */
+        .loader-ov { position: fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index: 9999; }
+        .spinner { width: 30px; height: 30px; border: 4px solid #f3f3f3; border-top: 4px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        
+        @keyframes blink { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
+        .live { animation: blink 1s infinite; background: var(--green) !important; }
+        .spin-icon { animation: spin 1s linear infinite; }
+    </style>
+</head>
+<body>
+
+<div class="loader-ov" id="loader">
+    <div class="spinner"></div>
+    <div id="loaderMsg" style="font-weight:700; color:var(--text-main); font-size:14px;">CONNECTING...</div>
+</div>
+
+<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="display:flex; align-items:center; gap:15px;">
+        <div style="font-weight:800; font-size:18px; color:var(--accent);">NIFTY 50</div>
+        <button class="btn" onclick="refreshDB()" id="refreshBtn">
+            <svg id="refIcon" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
+            REFRESH DB
+        </button>
+    </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 = [];
+
+    // === STARTUP SEQUENCE ===
+    window.onload = () => { checkStatus(); };
+
+    async function checkStatus() {
+        const msg = document.getElementById('loaderMsg');
+        try {
+            const res = await fetch('/api/status');
+            const status = await res.json();
+            
+            if(status.ready) {
+                msg.innerText = "LOADING DATA...";
+                loadDB();
+            } else {
+                msg.innerText = status.message.toUpperCase();
+                setTimeout(checkStatus, 2000);
+            }
+        } catch(e) {
+            msg.innerText = "CONNECTION LOST. RETRYING...";
+            setTimeout(checkStatus, 2000);
+        }
+    }
+
+    // 1. Backend only loads Expiry and Symbol (Master DB)
+    async function loadDB() {
+        try {
+            const res = await fetch('/api/init');
+            DB = await res.json();
+            if(!Array.isArray(DB) || DB.length === 0) {
+                 alert("DB Load Error. Retrying...");
+                 refreshDB(); 
+                 return;
+            }
+            document.getElementById('loader').style.display = 'none';
+            initApp();
+        } catch(e) {
+            console.error(e);
+        }
+    }
+
+    async function refreshDB() {
+        if(!confirm("Force download fresh data from NSE? This takes 10-20s.")) return;
+        const icon = document.getElementById('refIcon');
+        icon.classList.add('spin-icon');
+        
+        await fetch('/api/refresh');
+        document.getElementById('loader').style.display = 'flex';
+        checkStatus();
+    }
+
+    function initApp() {
+        // Logic on Frontend: Find 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();
+    }
+
+    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 = '';
+        // Frontend filtering logic
+        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, 1500);
+        poll();
+    }
+
+    // 2. Poll Logic: Decides what to fetch based on Scroll/Spot
+    async function poll() {
+        let syms = [SPOT_SYM, ...FUT_SYMS.map(f => f.s)];
+        
+        // Calculate visible range on Frontend to reduce data load
+        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));
+            
+            // Filter DB for symbols in view
+            DB.forEach(i => { if(i.e === ACTIVE_EXP && viewKs.includes(i.k)) syms.push(i.s); });
+        }
+
+        try {
+            const ts = Date.now();
+            // Call the Async Proxy
+            const res = await fetch(`/api/depth?symbols=${encodeURIComponent([...new Set(syms)].join(','))}&_=${ts}`);
+            
+            if(res.status === 401) {
+                location.href = '/'; // Token expired
+                return;
+            }
+
+            const json = await res.json();
+            if(json.s === 'ok') {
+                const dot = document.getElementById('statusDot');
+                dot.style.background = 'var(--green)';
+                dot.classList.add('live');
+                setTimeout(() => dot.classList.remove('live'), 500);
+                updateUI(json.d);
+            }
+        } catch(e) { document.getElementById('statusDot').style.background = 'var(--red)'; }
+    }
+
+    // 3. Update UI on Frontend
+    function updateUI(data) {
+        if(data[SPOT_SYM]) {
+            SPOT_PRICE = data[SPOT_SYM].ltp;
+            document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
+        }
+        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('');
+
+        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;
+            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)