Closes #016 - Deploy Native KaTeX Rig & Dual-Handbook System
This commit is contained in:
Antigravity Agent
130
components/modules/crypto/CryptoBlueprintModal.tsx
Normal file
130
components/modules/crypto/CryptoBlueprintModal.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import React from 'react';
|
||||
import { Settings, X } from 'lucide-react';
|
||||
|
||||
interface CryptoBlueprintModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function CryptoBlueprintModal({ isOpen, onClose }: CryptoBlueprintModalProps) {
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
if (isOpen) {
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/85 backdrop-blur-md p-4 sm:p-6 md:p-8 animate-fade-in">
|
||||
<div className="bg-slate-900 border border-slate-800/80 rounded-3xl w-full max-w-4xl h-[80vh] flex flex-col overflow-hidden shadow-2xl relative text-slate-350">
|
||||
|
||||
{/* Modal Header */}
|
||||
<div className="flex justify-between items-center px-6 py-4 bg-slate-950/45 border-b border-slate-800/60">
|
||||
<div>
|
||||
<h2 className="text-base font-bold bg-gradient-to-r from-cyan-400 to-sky-400 bg-clip-text text-transparent flex items-center gap-2">
|
||||
<Settings className="w-5 h-5 text-cyan-400" /> Crypto Bayes Module - Operational Blueprint
|
||||
</h2>
|
||||
<p className="text-[10px] text-slate-500 font-mono">System User Manual & Interface Mechanics</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-slate-400 hover:text-slate-200 bg-slate-950/50 border border-slate-800 hover:border-slate-700 p-2 rounded-xl transition-all cursor-pointer flex items-center justify-center"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="flex-1 overflow-y-auto p-6 sm:p-8 space-y-8 text-slate-350 scrollbar-thin">
|
||||
|
||||
<div className="border-b border-slate-800/80 pb-3">
|
||||
<h3 className="text-base font-bold text-slate-200">System Inputs & Signals</h3>
|
||||
<p className="text-xs text-slate-400 mt-1">Operational breakdown of key indicators used by the multi-model pipeline.</p>
|
||||
</div>
|
||||
|
||||
{/* Core Indicators */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
|
||||
<h4 className="text-xs font-bold text-cyan-400 uppercase tracking-wider font-mono">1. Funding Rates (Leverage Skew)</h4>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Reflects periodic payments exchanged between long and short traders. Extremely positive funding rates signal retail over-leverage and high risk of long liquidation squeezes (bearish indicators). Negative rates signal retail panic and potential short squeezes (bullish indicators).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
|
||||
<h4 className="text-xs font-bold text-cyan-400 uppercase tracking-wider font-mono">2. Open Interest Change (Capital Velocity)</h4>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Measures the net speed at which new contracts are being opened or closed. A sharp increase in Open Interest accompanied by price moves confirms a strong momentum transition, indicating institutional volume entry.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
|
||||
<h4 className="text-xs font-bold text-cyan-400 uppercase tracking-wider font-mono">3. Retail Skew (Contrarian Filter)</h4>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Calculates the proportion of long contracts held by retail accounts. The system operates under a contrarian framework: when retail long positioning is at extreme bullishness (e.g. Retail Skew > 1.50), the system dampens bullish forecast probabilities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl border border-slate-800/60 bg-slate-950/40 space-y-2">
|
||||
<h4 className="text-xs font-bold text-cyan-400 uppercase tracking-wider font-mono">4. Whale Inflows (Accumulation Vectors)</h4>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Tracks large volume transactions moving from spot exchanges to private cold storage. Accumulation inflows decrease available supply on exchanges, establishing a spot-supply mismatch that supports upward spot pricing pressure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interface Legend */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-bold text-slate-200 border-b border-slate-800 pb-2">Interface Layout & Metrics Legend</h3>
|
||||
<div className="bg-slate-950/40 p-5 rounded-2xl border border-slate-800/60 space-y-4 text-xs">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<strong className="text-slate-200 block mb-1">Expected Value (E: %)</strong>
|
||||
<p className="text-slate-400 leading-relaxed">
|
||||
Calculated as the Posterior Expected Value E = alpha / (alpha + beta) based on successes (alpha) and failures (beta). A value of e.g. **E: 85.5%** suggests that the estimator-horizon combination is highly calibrated.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<strong className="text-slate-200 block mb-1">Raw Trackers ("62/14")</strong>
|
||||
<p className="text-slate-400 leading-relaxed">
|
||||
Represents the absolute counts of success and failure outcomes: **62** successfully resolved direction predictions (alpha) and **14** false alarms or incorrect directional forecasts (beta).
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<strong className="text-slate-200 block mb-1">Horizon Forecasts</strong>
|
||||
<p className="text-slate-400 leading-relaxed">
|
||||
Displays direction (▲ UP / ▼ DOWN) and probability forecast for BTC, ETH, or SOL at horizons T+1 (24h), T+5 (5d), and T+10 (10d).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Operational Dynamics */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-bold text-slate-200 border-b border-slate-800 pb-2">Simulator & Ingestion Loops</h3>
|
||||
<div className="text-xs text-slate-400 space-y-3 leading-relaxed">
|
||||
<p>
|
||||
<strong className="text-cyan-400">Posterior Calibration Simulator:</strong> Clicking **"+1 Success (All)"** or **"+1 False Alarm (All)"** simulates model feedback loops. It increments the success or failure count across all 15 independent trackers, storing updated states immediately in `localStorage` to evaluate how expected accuracies drift when models perform well or poorly.
|
||||
</p>
|
||||
<p>
|
||||
<strong className="text-cyan-400">Background Evaluation Loop:</strong> When a user logs a manual forecast, the app registers predictions for all 15 trackers. In dev mode, the targets resolve quickly: T+1 in 60 seconds, T+5 in 5 minutes, and T+10 in 10 minutes. A background worker queries `/api/finance?region=crypto` to resolve the actual price change, updates the trackers in `localStorage`, and displays the success rates.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { predictCryptoTrend, calculateBetaPosterior } from '@/lib/math/statistic
|
||||
import 'katex/dist/katex.min.css';
|
||||
import { BlockMath, InlineMath } from 'react-katex';
|
||||
import CryptoMathModal from './CryptoMathModal';
|
||||
import CryptoBlueprintModal from './CryptoBlueprintModal';
|
||||
import {
|
||||
Cpu, Search, RefreshCw, BarChart2, TrendingUp, AlertCircle, Info,
|
||||
ChevronDown, ChevronUp, ArrowUpRight, ArrowDownRight, Compass, ShieldAlert, Sparkles,
|
||||
@@ -114,6 +115,7 @@ export default function CryptoDemo() {
|
||||
const [searchError, setSearchError] = useState(false);
|
||||
const [showMathAccordion, setShowMathAccordion] = useState(false);
|
||||
const [isMathModalOpen, setIsMathModalOpen] = useState(false);
|
||||
const [isBlueprintModalOpen, setIsBlueprintModalOpen] = useState(false);
|
||||
const [simulatedTrialLogged, setSimulatedTrialLogged] = useState(false);
|
||||
const [lastTrialSuccess, setLastTrialSuccess] = useState(false);
|
||||
|
||||
@@ -556,6 +558,14 @@ export default function CryptoDemo() {
|
||||
<span>📖 Quantitative Handbook</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setIsBlueprintModalOpen(true)}
|
||||
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-slate-950/80 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition-all font-semibold text-xs tracking-wider text-cyan-400 justify-center h-11"
|
||||
>
|
||||
<Cpu className="w-3.5 h-3.5" />
|
||||
<span>⚙️ Operational Blueprint</span>
|
||||
</button>
|
||||
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-xl px-4 py-2 flex items-center gap-3 h-11">
|
||||
<Cpu className="text-cyan-400 w-5 h-5 animate-spin-slow" />
|
||||
<div>
|
||||
@@ -1002,6 +1012,7 @@ export default function CryptoDemo() {
|
||||
</div>
|
||||
|
||||
<CryptoMathModal isOpen={isMathModalOpen} onClose={() => setIsMathModalOpen(false)} />
|
||||
<CryptoBlueprintModal isOpen={isBlueprintModalOpen} onClose={() => setIsBlueprintModalOpen(false)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -65,11 +65,11 @@ export default function CryptoMathModal({ isOpen, onClose }: CryptoMathModalProp
|
||||
<span className="block text-rose-400 font-bold">State 1 (S1)</span>
|
||||
<span>Bearish Squeeze / Crackdown</span>
|
||||
</div>
|
||||
<div className="bg-slate-955/40 p-3 rounded-lg border border-slate-800/50">
|
||||
<div className="bg-slate-950/40 p-3 rounded-lg border border-slate-800/50">
|
||||
<span className="block text-slate-300 font-bold">State 2 (S2)</span>
|
||||
<span>Consolidation / Mean Reversion</span>
|
||||
</div>
|
||||
<div className="bg-slate-955/40 p-3 rounded-lg border border-slate-800/50">
|
||||
<div className="bg-slate-950/40 p-3 rounded-lg border border-slate-800/50">
|
||||
<span className="block text-emerald-400 font-bold">State 3 (S3)</span>
|
||||
<span>Parabolic Bull Run</span>
|
||||
</div>
|
||||
@@ -117,10 +117,10 @@ export default function CryptoMathModal({ isOpen, onClose }: CryptoMathModalProp
|
||||
<div className="bg-slate-950/40 p-5 rounded-2xl border border-slate-800/60 space-y-3">
|
||||
<span className="text-xs font-semibold text-slate-200 block">Ensemble Feature Inputs:</span>
|
||||
<ul className="text-xs text-slate-400 list-disc pl-5 space-y-1">
|
||||
<li><strong className="text-cyan-400">Funding Rates (\\(FR_t\\)):</strong> Measures leverage imbalance in futures contracts.</li>
|
||||
<li><strong className="text-cyan-400">Open Interest Volatility (\\(OI_t\\)):</strong> Captures the contract buildup speed.</li>
|
||||
<li><strong className="text-cyan-400">Long/Short Retail Skew (\\(LS_t\\)):</strong> Identifies retail sentiment extremes.</li>
|
||||
<li><strong className="text-cyan-400">Whale Accumulation Inflows (\\(W_t\\)):</strong> Proxy for cold-wallet transfer velocities.</li>
|
||||
<li><strong className="text-cyan-400">Funding Rates (<InlineMath math="FR_t" />):</strong> Measures leverage imbalance in futures contracts.</li>
|
||||
<li><strong className="text-cyan-400">Open Interest Volatility (<InlineMath math="OI_t" />):</strong> Captures the contract buildup speed.</li>
|
||||
<li><strong className="text-cyan-400">Long/Short Retail Skew (<InlineMath math="LS_t" />):</strong> Identifies retail sentiment extremes.</li>
|
||||
<li><strong className="text-cyan-400">Whale Accumulation Inflows (<InlineMath math="W_t" />):</strong> Proxy for cold-wallet transfer velocities.</li>
|
||||
</ul>
|
||||
<p className="text-xs text-slate-400 leading-relaxed pt-2">
|
||||
The Random Forest ensemble evaluates 10 non-linear decision trees to output the short-term and medium-term trend probabilities:
|
||||
@@ -135,7 +135,7 @@ export default function CryptoMathModal({ isOpen, onClose }: CryptoMathModalProp
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
Raw ML forecasts are susceptible to regime drift. We implement a self-correcting Beta-Binomial update. The continuous probability output from the Random Forest model is mapped into a discrete Binomial likelihood by defining the Trust-Weight Hyperparameter (<InlineMath math="w" />) as the Effective Sample Size (ESS):
|
||||
</p>
|
||||
<div className="bg-slate-955/40 p-5 rounded-2xl border border-slate-850 space-y-4">
|
||||
<div className="bg-slate-950/40 p-5 rounded-2xl border border-slate-850 space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-350 mb-2 font-semibold">1. Prior Distribution (Accuracy History):</p>
|
||||
<BlockMath math="\\theta \\sim \\text{Beta}(\\alpha_{\\text{prior}}, \\beta_{\\text{prior}})" />
|
||||
@@ -165,7 +165,7 @@ export default function CryptoMathModal({ isOpen, onClose }: CryptoMathModalProp
|
||||
<p className="text-xs leading-relaxed text-slate-400">
|
||||
To resolve a single operational point-estimate from our posterior distribution, we integrate out the continuous parameter <InlineMath math="\\theta" /> to calculate the mathematical expectation of the posterior distribution:
|
||||
</p>
|
||||
<div className="bg-slate-955/40 p-5 rounded-2xl border border-slate-850 space-y-4">
|
||||
<div className="bg-slate-950/40 p-5 rounded-2xl border border-slate-850 space-y-4">
|
||||
<p className="text-xs text-slate-350 font-semibold">Posterior Expectation Integral Proof:</p>
|
||||
<BlockMath math="\\mathbb{E}[\\theta \\mid \\text{Data}] = \\int_{0}^{1} \\theta \\cdot P(\\theta \\mid \\text{Data}) \\, d\\theta = \\int_{0}^{1} \\theta \\cdot \\frac{\\theta^{\\alpha_{\\text{post}}-1}(1-\\theta)^{\\beta_{\\text{post}}-1}}{\\text{B}(\\alpha_{\\text{post}}, \\beta_{\\text{post}})} \\, d\\theta" />
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
|
||||
Reference in New Issue
Block a user