Spaces:

AndyKandy26
/

WM01

Running

App Files Files Community

AndyKandy26 commited on 10 days ago

Commit

c3743f6

verified ·

1 Parent(s): cec1030

Upload picks.html

Browse files

Files changed (1) hide show

picks.html +177 -61

picks.html CHANGED Viewed

@@ -219,6 +219,20 @@
       .stat-grid{grid-template-columns:1fr}
       .tab-bar{width:100%;overflow-x:auto}
     }
   </style>
 </head>
 <body>
@@ -244,7 +258,7 @@
   <div class="page-header">
     <div>
       <div class="page-title">Stock &amp; <span>Option Picks</span></div>
-      <div class="page-subtitle">Live prices via Yahoo Finance · Python backend (app.py) · 15-min delayed · Options data estimated</div>
     </div>
     <div class="header-actions">
       <div class="search-box">
@@ -265,7 +279,7 @@
       <span class="last-updated" id="lastUpdatedLabel">Not yet fetched — press "Fetch Live Data" to load Yahoo Finance prices</span>
     </div>
     <div style="font-size:.72rem;color:var(--text2)">
-      Source: Yahoo Finance via yfinance (Python) · Same-origin /api/quotes · Options: estimated · 10-min cooldown per tab
     </div>
   </div>
@@ -380,7 +394,7 @@
     <!-- Option Selling -->
     <div class="sub-panel active" id="sub-optSell">
-      <div class="opt-data-note">⚠️ <strong>Prices:</strong> live from Yahoo Finance. <strong>Premium / IV Rank:</strong> estimated from seed data scaled to live price — not real option chain data. Tradier API upgrade available on request.</div>
       <div class="filter-panel">
         <div class="filter-header" onclick="toggleFilter(this)">
           <div class="filter-title">⚙️ Option Selling Filters</div>
@@ -610,17 +624,28 @@
 /* ─────────────────────────────────────────────
    CONSTANTS & CACHE CONFIG
 ───────────────────────────────────────────── */
-const COOLDOWN_MS   = 10 * 60 * 1000;   // 10 minutes per tab
-const CACHE_TTL_MS  = 15 * 60 * 1000;   // 15-minute data freshness
-const SPARK_DELAY   = 500;              // ms between sparkline fetches
-// ── Local backend endpoints (served by app.py in the same HF Space) ──────────
-// No CORS proxies needed — the browser calls our own FastAPI server directly.
-const API_BASE  = '/api';              // same origin → zero CORS issues
-const API_QUOTE = `${API_BASE}/quotes?symbols=`;
-const API_CHART = `${API_BASE}/chart?symbol=`;
-let lastProxyLabel = 'local backend';
 // Active tab / sub-tab tracking
 let activeTab     = 'stocks';
@@ -759,42 +784,74 @@ function remainingCooldown(tab) {
 function canRefresh(tab) { return remainingCooldown(tab) === 0; }
 /* ─────────────────────────────────────────────
-   YAHOO FINANCE via LOCAL BACKEND (app.py)
-   No CORS proxies — same-origin calls to /api/quotes and /api/chart
 ───────────────────────────────────────────── */
-async function fetchQuotes(symbols) {
   try {
-    const res  = await fetch(API_QUOTE + symbols.join(','), {
-      signal: AbortSignal.timeout(15000),
-    });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const json = await res.json();   // { NVDA: {price, chg1d, vol}, ... }
-    // Normalise to same shape the rest of the code expects
-    const map = {};
-    for (const [sym, q] of Object.entries(json)) {
-      map[sym] = { price: q.price ?? null, chg1d: q.chg1d ?? null, vol: q.vol ?? null };
-    }
-    return map;
   } catch (e) {
-    console.warn('[FinWise] /api/quotes failed:', e.message);
     return null;
   }
 }
 async function fetchSparkline(ticker) {
   if (sparkCache[ticker]) return sparkCache[ticker];
   try {
-    const res  = await fetch(`${API_CHART}${ticker}&days=8`, {
-      signal: AbortSignal.timeout(12000),
-    });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const json   = await res.json();    // { symbol, closes: [...] }
-    const closes = (json.closes || []).filter(v => v != null).slice(-7);
     if (closes.length < 2) return null;
     sparkCache[ticker] = closes;
     return closes;
   } catch (e) {
-    console.warn(`[FinWise] /api/chart ${ticker} failed:`, e.message);
     return null;
   }
 }
@@ -918,15 +975,16 @@ function getVisibleTickers() {
    USER-TRIGGERED REFRESH  (button click)
 ───────────────────────────────────────────── */
 async function userRefresh() {
-  const tab = getVisibleDataKey();
-  const rem = remainingCooldown(tab);
-  if (rem > 0) {
-    // Already in cooldown — don't fetch, just show warning
-    flashCooldownWarning(rem);
     return;
   }
   setCooldown(tab);
   startCooldownDisplay(tab);
   await fetchForActiveTab();
@@ -969,22 +1027,29 @@ function flashCooldownWarning(rem) {
    STATUS BAR
 ───────────────────────────────────────────── */
 function updateStatusBar(state, tab) {
-  const badge   = document.getElementById('dataSourceBadge');
-  const label   = document.getElementById('lastUpdatedLabel');
-  const ts      = localStorage.getItem(cacheTimeKey(tab));
-  const ago     = ts ? Math.round((Date.now() - parseInt(ts)) / 60000) : null;
   const states = {
-    loading: { cls:'seed',   icon:'⏳', text:'Fetching live prices from Yahoo Finance via local backend…' },
-    live:    { cls:'live',   icon:'🟢', text:`Yahoo Finance · ${ago === 0 ? 'just now' : ago + ' min ago'} · 15-min market delay` },
-    cached:  { cls:'cached', icon:'📦', text:`Cached · fetched ${ago} min ago · press Fetch to refresh` },
-    error:   { cls:'error',  icon:'❌', text:'Backend fetch failed. Check that app.py is running and yfinance is installed (see requirements.txt).' },
-    seed:    { cls:'seed',   icon:'📦', text:'Seed data shown — press "Fetch Live Data" to load Yahoo Finance prices via backend' },
   };
   const s = states[state] || states.seed;
-  badge.className    = 'data-badge ' + s.cls;
-  badge.textContent  = `${s.icon} ${state === 'live' ? 'Live (15-min delay)' : state === 'cached' ? 'Cached' : state === 'error' ? 'Backend Error' : state === 'loading' ? 'Loading…' : 'Seed Data'}`;
-  label.textContent  = s.text;
 }
 /* ─────────────────────────────────────────────
@@ -1399,29 +1464,80 @@ function updateStats() {
 }
 /* ─────────────────────────────────────────────
-   INIT
 ───────────────────────────────────────────── */
 document.addEventListener('DOMContentLoaded', () => {
-  // Render with seed data immediately
-  renderStocks();
-  renderOptSell();
-  renderLeaps();
-  renderETFHolds();
-  renderETFOpts();
   updateStats();
-  // Restore cooldown display if tab is still in cooldown
   const tab = getVisibleDataKey();
   if (remainingCooldown(tab) > 0) startCooldownDisplay(tab);
-  // Show cached status if we already have data
   const cached = getCache(tab);
   if (cached) {
     mergePrices(tab, cached);
     renderStocks();
     updateStatusBar('cached', tab);
   }
 });
 </script>
 </body>
 </html>

       .stat-grid{grid-template-columns:1fr}
       .tab-bar{width:100%;overflow-x:auto}
     }
+    /* ── API Key Modal ── */
+    .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
+    .modal-backdrop.hidden{display:none}
+    .modal-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;width:min(460px,92vw);box-shadow:0 24px 64px rgba(0,0,0,.5)}
+    .modal-title{font-size:1.1rem;font-weight:800;margin-bottom:.4rem}
+    .modal-title span{color:var(--cyan)}
+    .modal-sub{font-size:.82rem;color:var(--text2);margin-bottom:1.25rem;line-height:1.65}
+    .modal-sub a{color:var(--cyan);text-decoration:none}
+    .modal-sub a:hover{text-decoration:underline}
+    .modal-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:.65rem .85rem;font-size:.88rem;font-family:monospace;outline:none;transition:border-color .15s}
+    .modal-input:focus{border-color:var(--cyan)}
+    .modal-actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
+    .modal-note{font-size:.72rem;color:var(--text2);margin-top:.85rem;line-height:1.55;padding:.65rem .75rem;background:var(--bg3);border-radius:8px}
+    .modal-note strong{color:var(--emerald)}
   </style>
 </head>
 <body>
   <div class="page-header">
     <div>
       <div class="page-title">Stock &amp; <span>Option Picks</span></div>
+      <div class="page-subtitle">Real-time prices via Finnhub · Free API key · No backend needed · Static HF Space compatible</div>
     </div>
     <div class="header-actions">
       <div class="search-box">
       <span class="last-updated" id="lastUpdatedLabel">Not yet fetched — press "Fetch Live Data" to load Yahoo Finance prices</span>
     </div>
     <div style="font-size:.72rem;color:var(--text2)">
+      Source: Finnhub.io (free tier) · 60 calls/min · Real-time US quotes · <span style="cursor:pointer;color:var(--cyan)" onclick="showKeyModal()">🔑 Manage API key</span>
     </div>
   </div>
     <!-- Option Selling -->
     <div class="sub-panel active" id="sub-optSell">
+      <div class="opt-data-note">⚠️ <strong>Prices:</strong> live from Finnhub. <strong>Premium / IV Rank:</strong> estimated from seed data scaled to live price — not real option chain data. Tradier API upgrade available on request.</div>
       <div class="filter-panel">
         <div class="filter-header" onclick="toggleFilter(this)">
           <div class="filter-title">⚙️ Option Selling Filters</div>
 /* ─────────────────────────────────────────────
    CONSTANTS & CACHE CONFIG
 ───────────────────────────────────────────── */
+const COOLDOWN_MS  = 10 * 60 * 1000;   // 10 min cooldown per tab
+const CACHE_TTL_MS = 15 * 60 * 1000;   // 15 min cache freshness
+const SPARK_DELAY  = 400;              // ms between sparkline requests
+// ── Finnhub API (free tier, CORS-enabled, no backend needed) ─────────────────
+// Free key: https://finnhub.io/register  (takes 30 seconds, no credit card)
+// Free tier: 60 calls/min · real-time US quotes · works from browser
+const FH_BASE      = 'https://finnhub.io/api/v1';
+const FH_QUOTE     = `${FH_BASE}/quote`;          // ?symbol=NVDA&token=KEY
+const FH_CANDLE    = `${FH_BASE}/stock/candle`;   // sparkline
+// ── API key management ────────────────────────────────────────────────────────
+// Key is stored in localStorage so user only enters it once.
+const KEY_STORAGE  = 'fw_finnhub_key';
+let FINNHUB_KEY    = localStorage.getItem(KEY_STORAGE) || '';
+function getKey() { return FINNHUB_KEY; }
+function saveKey(k) {
+  FINNHUB_KEY = k.trim();
+  localStorage.setItem(KEY_STORAGE, FINNHUB_KEY);
+}
+function hasKey() { return FINNHUB_KEY.length > 0; }
 // Active tab / sub-tab tracking
 let activeTab     = 'stocks';
 function canRefresh(tab) { return remainingCooldown(tab) === 0; }
 /* ─────────────────────────────────────────────
+   FINNHUB FETCH HELPERS
+   • fetchQuotes: parallel with concurrency cap of 5
+   • fetchSparkline: sequential with SPARK_DELAY gap
+   • Both return null on error (falls back to seed data)
 ───────────────────────────────────────────── */
+// Concurrency-limited parallel fetch — avoids hammering 60/min limit
+async function fetchAllQuotes(symbols) {
+  const key = getKey();
+  if (!key) return null;
+  const CONCURRENCY = 5;
+  const results = {};
+  const chunks = [];
+  for (let i = 0; i < symbols.length; i += CONCURRENCY)
+    chunks.push(symbols.slice(i, i + CONCURRENCY));
+  for (const chunk of chunks) {
+    const batch = await Promise.all(chunk.map(sym => fetchOneQuote(sym, key)));
+    batch.forEach((q, i) => { if (q) results[chunk[i]] = q; });
+    if (chunks.indexOf(chunk) < chunks.length - 1) await sleep(220); // ~5/220ms = safe under 60/min
+  }
+  return Object.keys(results).length ? results : null;
+}
+async function fetchOneQuote(symbol, key) {
   try {
+    const url = `${FH_QUOTE}?symbol=${encodeURIComponent(symbol)}&token=${key}`;
+    const res = await fetch(url, { signal: AbortSignal.timeout(8000) });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const j = await res.json();
+    // Finnhub quote: { c: current, d: change, dp: %change, h: high, l: low, pc: prev close }
+    if (!j.c || j.c === 0) return null;  // 0 = no data (market closed or invalid ticker)
+    return {
+      price: parseFloat(j.c.toFixed(2)),
+      chg1d: parseFloat((j.dp || 0).toFixed(2)),
+      vol:   null,   // not in Finnhub basic quote — volume via candles if needed
+    };
   } catch (e) {
+    console.warn(`[FinWise] Finnhub quote failed (${symbol}):`, e.message);
     return null;
   }
 }
+// Alias used by existing orchestration code
+async function fetchQuotes(symbols) {
+  return await fetchAllQuotes(symbols);
+}
 async function fetchSparkline(ticker) {
   if (sparkCache[ticker]) return sparkCache[ticker];
+  const key = getKey();
+  if (!key) return null;
   try {
+    const to   = Math.floor(Date.now() / 1000);
+    const from = to - 8 * 24 * 60 * 60;   // 8 calendar days back → ~5-6 trading days
+    const url  = `${FH_CANDLE}?symbol=${ticker}&resolution=D&from=${from}&to=${to}&token=${key}`;
+    const res  = await fetch(url, { signal: AbortSignal.timeout(8000) });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const j = await res.json();
+    // Finnhub candle: { c: [closes], s: "ok" }
+    if (j.s !== 'ok' || !j.c?.length) return null;
+    const closes = j.c.filter(v => v != null).slice(-7);
     if (closes.length < 2) return null;
     sparkCache[ticker] = closes;
     return closes;
   } catch (e) {
+    console.warn(`[FinWise] Finnhub candle failed (${ticker}):`, e.message);
     return null;
   }
 }
    USER-TRIGGERED REFRESH  (button click)
 ───────────────────────────────────────────── */
 async function userRefresh() {
+  // Prompt for API key if not set
+  if (!hasKey()) {
+    showKeyModal();
     return;
   }
+  const tab = getVisibleDataKey();
+  const rem = remainingCooldown(tab);
+  if (rem > 0) { flashCooldownWarning(rem); return; }
   setCooldown(tab);
   startCooldownDisplay(tab);
   await fetchForActiveTab();
    STATUS BAR
 ───────────────────────────────────────────── */
 function updateStatusBar(state, tab) {
+  const badge  = document.getElementById('dataSourceBadge');
+  const label  = document.getElementById('lastUpdatedLabel');
+  const ts     = localStorage.getItem(cacheTimeKey(tab));
+  const ago    = ts ? Math.round((Date.now() - parseInt(ts)) / 60000) : null;
   const states = {
+    nokey:   { cls:'seed',   icon:'🔑', text:'No API key set — click "Fetch Live Data" to enter your free Finnhub key (finnhub.io)' },
+    loading: { cls:'seed',   icon:'⏳', text:'Fetching live quotes from Finnhub…' },
+    live:    { cls:'live',   icon:'🟢', text:`Finnhub · ${ago === 0 ? 'just now' : ago + ' min ago'} · real-time US quotes` },
+    cached:  { cls:'cached', icon:'📦', text:`Cached · ${ago} min ago · press Fetch to refresh` },
+    error:   { cls:'error',  icon:'❌', text:'Finnhub fetch failed. Check your API key is valid at finnhub.io — or try again in a moment.' },
+    seed:    { cls:'seed',   icon:'📦', text:'Seed data shown — press "Fetch Live Data" and enter your free Finnhub key' },
   };
   const s = states[state] || states.seed;
+  badge.className   = 'data-badge ' + s.cls;
+  badge.textContent = `${s.icon} ${
+    state==='live'    ? 'Live (Finnhub)' :
+    state==='cached'  ? 'Cached' :
+    state==='error'   ? 'API Error' :
+    state==='nokey'   ? 'No API Key' :
+    state==='loading' ? 'Loading…' : 'Seed Data'
+  }`;
+  label.textContent = s.text;
 }
 /* ─────────────────────────────────────────────
 }
 /* ─────────────────────────────────────────────
+   API KEY MODAL
 ───────────────────────────────────────────── */
+function showKeyModal() {
+  document.getElementById('keyModal').classList.remove('hidden');
+  document.getElementById('keyInput').value = FINNHUB_KEY || '';
+  document.getElementById('keyInput').focus();
+}
+function hideKeyModal() {
+  document.getElementById('keyModal').classList.add('hidden');
+}
+async function confirmKey() {
+  const k = document.getElementById('keyInput').value.trim();
+  if (!k) { document.getElementById('keyInput').style.borderColor='var(--rose)'; return; }
+  saveKey(k);
+  hideKeyModal();
+  document.getElementById('refreshLabel').textContent = '⬇️ Fetch Live Data';
+  // Auto-trigger fetch now that we have a key
+  const tab = getVisibleDataKey();
+  setCooldown(tab);
+  startCooldownDisplay(tab);
+  await fetchForActiveTab();
+}
+function clearKey() {
+  saveKey('');
+  document.getElementById('keyInput').value = '';
+  updateStatusBar('nokey', getVisibleDataKey());
+}
+// Allow Enter key in the input
+document.addEventListener('DOMContentLoaded', () => {
+  document.getElementById('keyInput')?.addEventListener('keydown', e => {
+    if (e.key === 'Enter') confirmKey();
+    if (e.key === 'Escape') hideKeyModal();
+  });
+});
 document.addEventListener('DOMContentLoaded', () => {
+  renderStocks(); renderOptSell(); renderLeaps(); renderETFHolds(); renderETFOpts();
   updateStats();
   const tab = getVisibleDataKey();
   if (remainingCooldown(tab) > 0) startCooldownDisplay(tab);
   const cached = getCache(tab);
   if (cached) {
     mergePrices(tab, cached);
     renderStocks();
     updateStatusBar('cached', tab);
+  } else {
+    updateStatusBar(hasKey() ? 'seed' : 'nokey', tab);
   }
 });
 </script>
+<!-- ═══════════ API KEY MODAL ═══════════ -->
+<div class="modal-backdrop hidden" id="keyModal" onclick="if(event.target===this)hideKeyModal()">
+  <div class="modal-box">
+    <div class="modal-title">🔑 Enter your <span>Finnhub API Key</span></div>
+    <div class="modal-sub">
+      FinWise uses <a href="https://finnhub.io/register" target="_blank">Finnhub.io</a> for real-time stock quotes.
+      The free tier gives you <strong>60 calls/minute</strong> with no credit card required.<br><br>
+      <strong>Steps:</strong> 1) Go to <a href="https://finnhub.io/register" target="_blank">finnhub.io/register</a>
+      → 2) Sign up free → 3) Copy your API key from the dashboard → 4) Paste it below.
+    </div>
+    <input class="modal-input" id="keyInput" type="text"
+      placeholder="e.g. d0abc123xyz456..." autocomplete="off" spellcheck="false" />
+    <div class="modal-actions">
+      <button class="btn btn-primary" onclick="confirmKey()">✅ Save &amp; Fetch Data</button>
+      <button class="btn btn-ghost" onclick="hideKeyModal()">Cancel</button>
+      <button class="btn btn-ghost" onclick="clearKey()" style="margin-left:auto;color:var(--rose);border-color:var(--rose)">🗑 Clear Key</button>
+    </div>
+    <div class="modal-note">
+      <strong>🔒 Privacy:</strong> Your key is stored only in your browser's localStorage — never sent to any server other than Finnhub directly. You can clear it anytime with the button above.
+    </div>
+  </div>
+</div>
 </body>
 </html>